Question

我有一个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");
        }
    }
});

CheckZero（）函数检查某些内容中是否存在li元素并返回true或false。

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

Answer 1

您需要使用event delegate

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

Answer 2

您可以使用类似于您正在使用的语法，但必须稍微修改一下。

现在你有了这个：

$('selector').on(eventObject)

这样做是为了将事件订阅到页面中已经存在的所选对象。

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

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

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

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

毫无疑问，这对你有用：

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

但很可能你可以选择一个小于文档本身的元素。

它是如何工作的？事件通过DOM元素树冒泡。当事件到达“父对象”时，它会检查启动事件的元素是否满足过滤器。如果是，则处理该事件。如果没有，没有做任何事情。

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

2 个答案: