从元素中动态 removeClass 但仍然可以检测到 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

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

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

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