。点击动态类之前发生的点击函数jquery

Question

所以我有一些代码，其中一个类（elink）当点击改变到一个不同的类（玩），然后当.playing得到点击它应该改变类再次。暂停，但我的问题是，当我点击.elink它同时添加.playing和.pause。

所以我尝试使用警报，当你点击.playing，但它会触发当你点击.elink。我很困惑，为什么会发生这种情况。继承人我正在使用jquery

player(); 
function player() { 
    $(".elink").click(function(e) { 
    $(".playing").addClass("elink").removeClass("playing"); 
    $(this).removeClass("elink").addClass("playing"); 
    }); 
} 

$('body').on("click", ".playing", function(){ 
    $(this).addClass("paused") 
}); 

Answer 1

你想要这样吗？

 player(); 
     function player() { 
      jQuery(".elink").click(function(e) {  
      jQuery(".playing").addClass("elink").removeClass("playing"); 
      jQuery(this).removeClass("elink").addClass("playing"); 
      return false; 
      }); 
     } 

     jQuery('body').on("click", ".playing", function(){ 
      jQuery(this).addClass("paused") 
     }); 

Answer 2

让我先解释下面两种类型的事件绑定之间的区别。

第一个 -jQuery(".elink").click(function(e) {

这会发现所有这些具有类.elink并附加click事件处理函数的元素来。它就像紧密耦合的事件一样（或者记住事件被注入到每个具有该类的元素中），它一旦附加它就会一直存在，直到元素的生命周期或手动移除event。因此，现在不管元素如何追加子元素，改变其类别在HTML等中的位置等都不会影响已注入其中的event。除非事件如上所述被移除。

第二个 -$('body').on("click", ".playing", function(){

这里click事件被附加到文档的水平，但有一个小的差异。我们给出额外的参数说明应该在哪些元素上应用下面的事件处理函数。所以当有任何click事件时，jquery代码将检查click是否在指定的元素或其子上，如果是，则执行该功能否。由于它附加到文档中而不是特定元素，因此事件将始终在单击时指定类别的任何元素上工作。这种事件绑定被称为event delegation，对于处理动态元素上的事件很有用。

现在有了这些知识，我们来看看你的代码。

jQuery(".elink").click(function(e) {  
    jQuery(".playing").addClass("elink").removeClass("playing"); 
    jQuery(this).removeClass("elink").addClass("playing"); 
    return false; 
}); 

您事件强烈地绑定到元素与elink类，用它你改变它的类别的东西，但是，这并不对来自下一再次点击运行此功能停止。根据目前每个click的逻辑，无论如何，您都要添加类playing。

所以我有一些代码在当单击更改为不同类的类（ELINK）（播放），然后被点击.playing当它应该再次更改类.pause，

为了达到这个目的，你需要使用下面的逻辑。

player(); 
function player() { 
    $(".elink").click(function(e) { // this is one time binding to element, so chnaging class names will have no effect on the execution of the event on further clicks 
    var currentClass = $(this).attr('class'); 

    switch(currentClass){ 
    case 'elink': $(this).removeClass("elink").addClass("playing"); break; 
    case 'playing': $(this).removeClass("playing").addClass("pause");break 
    default?: break; 
    }  
    }); 
} 

注意我已删除了event delegation脚本，因为我们正在处理相同的元素，即使我们改变类，这是足以处理任务时始终闪光。

希望这会有所帮助。