从元素中动态删除类，但仍然可以检测到 Click 事件

Question

我的按钮是这样的：

<a class="h-modal-btn branch-modal-btn"> Buy Now </a>

场景是我想根据URL传递的查询字符串删除类并为按钮添加属性。省略上面的步骤，我就这样做了

$('a.branch-modal-btn').removeClass('h-modal-btn');

当我通过检查开发人员工具检查该类是否被删除时。好吧，该类已从 HTML 中删除。伟大的！但是马上我发现下面的代码还在执行。

$('.h-modal-btn').on('click', function() {
    // Do somthing
)}

这太令人沮丧了！请帮助我，我将不胜感激。

Answer 1

代替：

$('.h-modal-btn').on('click', function() {
    // Do somthing
)}

使用这个：

$(document).on('click', '.h-modal-btn', function() {
    // Do somthing
)}

或者你可以使用这个：

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');

Answer 2

这是因为您在移除该类之前已将事件侦听器分配给该按钮。现在已经附加了事件监听器。像这样更改类名不会帮助您不再触发侦听器。

因此，您需要从这些元素中手动移除侦听器。您可以为此使用unbind 或更新的off 方法。

$('a.branch-modal-btn').off("click").removeClass('h-modal-btn');