Question

我有这种处理程序

$(".mydiv").on('click', function(e){

// some logic
$(this).toggleClass('active');

//other logic

});

我有一个错误，这个事件被触发两次，我看到第一次运行时this是".mydiv"而第二次运行时this是".mydiv.active"并且似乎在事件处理期间将".mydiv.active"添加到与选择器匹配的节点列表

有解决方法吗？

这是更全面的代码：

$(".filter_view:not(.mobile-view) .filter_content .cat, .filter_view:not(.mobile-view) .filter_content .check_area, .mobile-view .search_filter").on("click", function(e){
        debugger;

        $(this).toggleClass("active");
                e.stopPropagation();

// rest of the logic

});

<span class="check_area col-xs-4 col-md-2">
    <input class="filter_checkbox" id="Neve" name="Neve" type="checkbox" value="Neve"> 
    <label class="filter_checkbox_label" for="Neve">Neve</label>
</span>

基本上，父级是.filter_view，但在移动设备上它有一个.mobile-view级，所以在移动设备上我希望search_filter执行逻辑，而不是移动时点击check_area（复选框+标签）和.cat（类别）

当检查第一个和第二个触发器上的事件时，第一个目标是标签（我点击了什么）但第二个目标是复选框（我没有点击）

即使我停止了传播，也许是引导程序（或其他一些框架库）发生了一个事件，当点击标签时，复选框也是click()？

Answer 1

尝试

$(".mydiv").on('click', function(e){

// some logic
$(this).toggleClass('active');

e.stopPropagation();

});

stopPropagation（）可防止事件冒泡。

Answer 2

在绑定click事件之前添加$(".mydiv").off('click');，您向我们展示的代码可能被调用两次，这会将事件处理程序绑定两次。也许你在一个多次调用的init（）函数中有它？

事件处理器处理选择器两次

2 个答案: