jQuery 已停止识别点击事件

Question

我有一个函数，每次用户执行一个新步骤时都会调用该函数，以将点击事件绑定到添加到页面的每个新项目，它工作正常但现在停止了，我无法理解为什么

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() {

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

例如

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

它的工作原理是监听指定的事件到 bubble-up 到连接的元素，然后它应用 jQuery 选择器。然后它将函数 应用于导致事件 .

的匹配项

这样 .wall-dropdown .item 的匹配仅在活动时间进行，因此项目可以晚于活动注册时间存在。

document是最好的默认没有其他元素是closer/convenient。不要将 body 用于委托事件，因为它有一个错误（与样式有关）可以阻止鼠标事件触发。基本上，如果样式导致计算出的 body 高度为 0，它就会停止接收冒泡的鼠标事件。此外，由于 document always 存在，您不需要将 document-based 委托处理程序包装在 DOM 就绪 :)

Answer 2

为什么不像

那样将事件绑定到 body

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

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

jQuery 已停止识别点击事件

jQuery has stopped recognizing click events

javascript

jquery

javascript-events