Question

每次用户完成一个新步骤，将click事件绑定到添加到页面的每个新项目时，我都会调用一个函数，它运行正常，但现在已停止，我无法弄清楚为什么

function bindClickEvents() {
    console.log('bindClickEvents');

    $(".wall-dropdown .item").unbind('click').on('click', function() {

        console.log('Item clicked');

        if ($(this).hasClass('range')) {
            $(".item.range").removeClass('active');

            selectedRange = $(this).data('id');

            $(this).addClass('active');

            selectedStyle = null;
            selectedColour = null;
        }

        if ($(this).hasClass('style')) {
            $(".item.style").removeClass('active');

            selectedStyle = $(this).data('id');

            $(this).addClass('active');

            selectedColour = null;
        }

        if ($(this).hasClass('colour')) {
            $(".item.colour").removeClass('active');

            selectedColour = $(this).data('id');

            $(this).addClass('active');
        }

        runFilter();
    });
}

Answer 1

将off与on（非解除绑定）

一起使用

 $(".wall-dropdown .item").off('click').on('click', function() {

但是我建议您只需切换到委托事件处理程序（附加到不变的祖先元素）：

e.g

 $(document).on("click", ".wall-dropdown .item", function()

它通过侦听指定的事件来冒泡到连接元素，然后应用jQuery选择器。然后它将函数应用于导致事件的匹配项。

这样.wall-dropdown .item的匹配仅在事件时间完成，因此项目可以比事件注册时间晚。

document是没有其他元素更接近/方便的最佳默认值。不要将body用于委派事件，因为它有一个可以阻止鼠标事件触发的错误（与样式有关）。基本上，如果样式导致计算的主体高度为0，则它会停止接收冒泡的鼠标事件。此外，当document 总是存在时，您不需要将基于文档的委托处理程序包装在DOM中：）

Answer 2

为什么不将事件绑定到body

$('body').on('click','.wall-dropdown .item',function(){...some code...})

防止事件重新初始化？此代码自动适用于每个新元素.wall-dropdown .item

jQuery已停止识别点击事件

2 个答案: