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");

这一切都运行正常，除非课程改为“不同帖子”后按钮仍然会对同类课程触发器做出反应。

所以我有这个：

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

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

我想用不同的帖子类进行另一个动作，但在解决之前不能这样做。

我注意到我网站上其他地方有关于.on（）的类似问题。我无法在jsFiddle中重现这个问题，因为它在那里工作得很好。

使用bootstrap +最新的jQuery版本。有任何想法吗？我知道这是一个很长的镜头，但认为有人可能有类似的问题。

感谢。

Answer 1

问题是你是否将一个处理程序连接到该元素，之后如果该类发生了变化并不重要。

使用附加到不变的祖先的委托处理程序：

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

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

对于委派事件，

记录is the default if no other element is handy, but never use body`，因为它有一个错误（如果样式导致计算的正文高度为0，则不会响应鼠标事件。）

通常，您会尝试绑定到更改元素附近的祖先。

Answer 2

我猜问题依赖于on的定义。（见http://api.jquery.com/on/）

实际上有两种方式＆＃34; on＆＃34;作品。

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

VS

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

第一个基本上意味着：

将所有元素上的函数绑定到＆＃34; life-post＆＃34;当前作为类并在发生单击时执行。

第二个是：当点击事件发生在＆＃34; body＆＃34;在一个有课程的元素上＃34; like-post＆＃34;执行功能。

主要区别在于，第一个绑定在当前状态＆＃34;代码首次执行时的元素（意味着绑定代码），而第二种情况反映了当＆＃34;点击＆＃34;行动发生了。

您可以使用$（文档）或其他选择器代替body，但基本上您必须避免直接使用该元素，而是使用它的父元素。

或者您也可以选择以下支票：

$( ".like-post" ).on( "click", function() {
   // the class has been removed
   if(!$(this).hasClass("like-post))
      return;

   ......
});

Answer 3

当您直接向元素添加事件时，更改类时它不会神奇地删除事件。您需要解除绑定或在函数内添加逻辑。其他选择是使用事件委托

unbind示例：

$(".like-post").on('click', function(){ 
    $(this).unbind("click");
    //logic here
});

带支票的基本想法：

$(".like-post").on('click', function(){ 
    var btn = $(this);
    if (btn.hasClass("xxx")) {
        //do this logic
    } else {
        //do that logic
    }
});

事件委托：

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

Answer 4

这是因为.on()在一个特定时刻评估元素，当它被定义时。它是否仍与选择器匹配并不重要。

如果您需要更灵活的解决方案，请将更多参数传递给.on()，如下所示：

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

这样，只会匹配like-post类目前的元素。

它不一定是body，它可以是您知道的最深层元素，它始终包含此.like-post按钮。

jQuery .on（）无法正常工作

4 个答案: