javascript - jQuery .on() 无法正常工作

Question

这很难解释......

我有一个自定义按钮。

<button class="like-post">Like Post</button>

在用户点击赞后，我执行 AJAX 调用并向数据库添加一行，然后添加和删除类。

btn.removeClass('btn-success')
          .removeClass("like-post")
          .addClass('btn-default')
          .addClass('unlike-post')
          .html("<span class='glyphicon glyphicon-remove'></span> Un-like");

一切正常，除了在类更改为“unlike-post”之后按钮仍然对 like-post 类触发器使用react。

所以我有这个:

$(".like-post").on('click', function(){ });

即使按钮没有类似帖子的类，它也会执行该操作。我已经检查过，肯定会正确删除/添加该类。

我想对 unlike-post 类执行另一个操作，但在这个问题解决之前不能。

我在我网站的其他地方注意到了一个关于 .on() 的类似问题。我无法在 jsFiddle 中重现该问题，因为它在那里工作正常。

使用 bootstrap + 最新的 jQuery 版本。有任何想法吗？我知道这是不可能的，但认为有人可能遇到过类似的问题。

谢谢。

Answer 1

问题是您将一个处理程序连接到该元素，此后类是否更改都无关紧要。

使用附加到不变祖先的委托(delegate)处理程序:

 $(document).on("click", ".like-post", function(){ });

委托(delegate)事件通过监听事件冒泡到祖先元素来工作。然后他们在事件时间(不是事件注册时间)将 jQuery 过滤器应用于气泡链中的元素。然后，他们仅将该函数应用于导致该事件的匹配元素。这种类型的处理程序实际上可以更有效(因为它用一个更慢的事件处理程序来换取更快的设置时间)。由于点击速度非常慢，您永远不会注意到委托(delegate)事件处理程序比直接连接的处理程序慢。

document 是默认的，如果没有其他元素是方便的，但永远不要将 body` 用于委托(delegate)事件，因为它有一个错误(如果样式导致计算出的主体高度为 0，它将不会响应鼠标事件)。

尽管您通常会尝试绑定(bind)到靠近变化元素的祖先。