jquery on click事件绑定又解绑

Question

emmm，还是上代码比较清晰点，实在是不知道怎么描述这个了

 //光标处插入标签code,动态绑定
            $("#tagList").on("click","li",function () {
                    $(this).unbind("click").click(function () {                        var selectedTag = $.trim($(this).text());
                        tmplTagListObj.forEach(function (item, index) {                            if (item.name == selectedTag) {
                                $("#tplContent").insertAtCaret("$" + "{" + item.code + "}");
                            }

                        })
                    })                // }
            });

上面是点击li标签进行一个文字插值的操作，（insertAtCaret这个是插值的函数，正常无问题）
效果如下图

点击一下标题会自动生成一个$(title)的占位符，标签那一栏可以动态添加新的标签
原先的做法是直接绑定点击事件，出现的bug如下：
约束就是同一弹出框的标签名不能重复，不同弹框下的标签名可以重复
对a弹出框添加一个标签，叉掉a弹框之后，在b弹出框再动态添加一个名称相同的标签，点击一下会生成两个占位符，重复操作，到了c弹出框就是三个相同的占位符，以此类推

于是改成了问题描述里的写法，很显然，这种写法第一次点击毫无反应，一切正常反应都从鼠标第二次点击开始
我想知道 
如何解决第一次点击不生效的情况？
ps:尝试在外面一层模拟一次点击事件，不起作用，然后在里面一层模拟一次点击事件，F12里面打印出很多次的console数据，同不起作用

Answer 1

很明显你在叉掉标签之后 没有清理tmplTagListObj这个里面的数据 新添加相同的标签之后 实际上tmplTagListObj里面已经存在了一个相同的标签而你click事件里面用forEach遍历了tmplTagListObj 导致多次进入if语句 然后就添加了多个占位符