jquery on click事件绑定又解绑

黎明星刻
  • 562

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数据,同不起作用

回复
阅读 1.4k
1 个回答

很明显你在叉掉标签之后 没有清理tmplTagListObj这个里面的数据 新添加相同的标签之后 实际上tmplTagListObj里面已经存在了一个相同的标签

而你click事件里面用forEach遍历了tmplTagListObj 导致多次进入if语句 然后就添加了多个占位符

宣传栏