为啥在 Jquery 中添加“阻止程序”类后我的事件绑定不再触发？

Posted 2023-05-09

【中文标题】为啥在 Jquery 中添加“阻止程序”类后我的事件绑定不再触发？

【英文标题】：Why does my event binding not trigger any more after adding a "blocker" class in Jquery?为什么在 Jquery 中添加“阻止程序”类后我的事件绑定不再触发？

【发布时间】：2013-03-07 22:17:15

【问题描述】：

我有一个这样的搜索输入绑定：

$(document).on('tablebeforefilter.results_filter',
   '#results_table:not(.bound)',
   function (e, data) 
     e.target.class += "bound";
     // stuff
   );

我正在使用bound 类来防止在重新加载页面时重新绑定元素（我正在使用Jquery Mobile，因此当用户在两个页面之间来回切换时会发生这种情况。

我的问题是，这样做会正确设置绑定，但它只会触发我的处理程序一次，可能是因为我将“绑定”类添加到元素中。

问题： 为什么会这样？我认为$(document) & some element 上的绑定集将被设置然后运行，无论我添加什么类到这个元素。仅当重新解析页面时，我的 bound 类才阻止再次附加绑定。如果我添加了阻塞 bound 类，为什么我的函数不再触发？

谢谢！

【问题讨论】：

如果你使用 jQuery... 为什么不 $(this).addClass( 'bound' ); ？

mh。我喜欢尽可能使用纯 javascript。有区别吗？

bound 之前缺少一个空格。如果元素已经具有类foo，则使其具有类foobound。不再是foo，也不是bound。

.class 不是字符串吗？所以你将"bound" 添加到字符串"results_filter" 并得到"results_filterbound"——一个全新的类。

看看这个链接：***.com/a/14469041/1848600，搜索防止多事件绑定/触发一章。查看解决方案 2 或 3。解决方案 3 是最简单的解决方案。

【参考方案1】：

.class 是一个字符串。所以你将"bound" 添加到字符串"results_filter" 并得到"results_filterbound"——一个全新的类。因此.on() 选择器不再匹配。如果你想使用.class，你也必须添加一个空白：

e.target.class += " bound";

这将添加一个类bound 并保留旧类。要轻松处理类，您可以使用 jQuery 的 addClass() 或 removeClass()。

【参考方案2】：

将 jQuery 与“.on”一起使用旨在与不断变化的 html 结构一起使用。所以一旦你添加了“绑定”类，你的事件就不会再触发了。

尝试使用类似的东西

$(document).on('tablebeforefilter.results_filter', '#results_table', function (e, data) 
    var $table = $(this);
    if ($table.hasClass('bound') == false) 
        $table.addClass('bound');
     else 
        // stuff with bound class
    
    // common stuff for both cases
);