在元素不再匹配选择器之后，jQuery事件处理程序继续工作

Question

我有一个在页面加载时被禁用的按钮。稍后我通过Javascript从按钮中删除“禁用”属性。尽管该元素不再与这些选择器匹配，但单击该按钮不会导致任何事件。为什么呢？

这是我的HTML＆amp; JS为页面加载按钮：

HTML

<button class="btn btn-primary" disabled>Submit</button> 

JS

$("btn[disabled]).click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

Answer 1

问题在于，当您将事件绑定到元素时，对元素属性所做的更改将不会反映在已注册的处理程序中。

您需要使用事件委派来处理动态选择器 - 但在这种情况下无法阻止传播

$(document).on('click', '.btn[disabled]', function(e){
    e.preventDefault();
});

或检查处理程序中的hte条件

$('.btn').click(function (e) {
    if ($(this).is('[disabled]')) {
        e.preventDefault();
        e.stopPropagation();
    }
});

Answer 2

假设您的代码缺少.和"：

$(".btn[disabled]").click(function(e){
  e.preventDefault();
  e.stopPropagation();
});

它一直触发click事件的原因是它在你连接时匹配选择器 。上面的代码执行此操作：

1. $(".btn[disabled]") - 在该时刻找到所有匹配的元素
2. .click(...) - 为他们附加处理程序

如果您稍后更改它们以使它们不再与选择器匹配，则无关紧要;您已将事件附加到元素。

如果要在事件发生时检查选择器，可以使用事件委派：

$("some container element").on("click", ".btn[disabled]", function(e){
  e.preventDefault();
  e.stopPropagation();
});

...其中$("some container element")匹配.btn[disabled]可能所在的容器。点击被挂钩在容器上，但jQuery只会在点击通过与选择器匹配的内容时调用您的处理程序当它发生时。

如果你没有合适的东西来处理你想要处理的元素，你可以使用document作为容器（$(document).on(...)）。