Javascript 如何在不刷新选项卡的情况下将事件处理程序应用于新元素？

我有一个JQuery函数：

$('.btn-cart-toggle').on({
    click: function () {
        if (!CheckZero()) {
            if ($('.cart-bubble').hasClass('active')) {
                $('.cart-bubble').removeClass("active");
                $('.cart-bubble').addClass("hidden");
            }
            else {
                $('.cart-bubble').addClass("active");
                $('.cart-bubble').removeClass("hidden");
            }
        }
    }, mouseenter: function () {
        if ($('.cart-bubble').hasClass('active') != true && !CheckZero()) {
            clearTimeout(timer);
            $('#notificacion-perfil').hide();
            if ($('.cart-bubble ul.items li').size() > 0) {
                if ($('.cart-bubble').hasClass('hidden')) {
                    $('.cart-bubble').removeClass("hidden");
                }
            }
        }
    }, mouseleave: function () {
        if ($('.cart-bubble').hasClass('active') != true) {
            if ($('.cart-bubble').hasClass('hidden') != true) {
                timer = setTimeout(function () {
                    $('.cart-bubble').addClass("hidden");
                }, 800);
            }
        }
    }, dblclick: function () {
        if (!CheckZero()) {
            $('.cart-bubble').removeClass("active");
            $('.cart-bubble').addClass("hidden");
        }
    }
});

函数的作用是：检查某物中是否有li元素，并返回true或false

---

一切正常，但现在我添加了一个li元素，我必须刷新页面才能切换.cart气泡类

您需要使用

事件委托

$('document').on('click','.btn-cart-toggle',function () {
  //your code
});

---

您可以使用与您正在使用的语法类似的语法，但必须稍微修改它

现在你有了这个：

$('selector').on(eventObject)

这样做的目的是将事件订阅到页面中已存在的选定对象

如果您需要订阅将来将存在的对象，您必须这样做：

$('parent selector').on(eventObject,'filter');

如果这样做，则必须指定：

• “父选择器”必须选择一个DOM元素，该元素包含要处理其事件的所有元素
• “过滤器”必须只选择要处理其事件的DOM元素

毫无疑问，这将对您有效：

$('document').on(eventObject,'.btn-cart-toggle');

但您很可能可以选择一个比文档本身小的元素

---

它是如何工作的？事件在DOM元素树中冒泡出现。当事件到达“父对象”时，它会检查启动事件的元素是否满足过滤器的要求。如果是，则处理该事件。如果没有，则不会执行任何操作。

您没有正确使用

on（）

。查看关于“活动授权”的大量答案，或查看文档。使用

bind

而不是

on

上的

。当在上述代码运行后创建
li
元素时，事件将不会应用于新创建的列表项。添加新元素时，必须将它们单独绑定。编辑时有什么不起作用？你想实现什么，失败的是什么？你调试过了吗？我尝试的是在.cart泡泡外单击使其“关闭”。它在更改之前工作正常，现在一切正常，但这会使您更改所使用的语法。您可以看到我的答案，继续使用您自己的语法，但需要进行必要的更改以使其作为委托事件工作。非常好的解释，谢谢！但是我现在遇到了麻烦，我将使用一个函数将其添加到问题中