事件委托不工作的jQuery

Question

所以我刚开始接触事件代表团，我还是被它弄得相当，但这里有云：

我有一个按钮，这增加了在阿贾克斯的评级，再次点击我'喜欢它去除评分，这里是带注释的代码（并且删除了一些部分以使其看起来更清晰）。

$(document).on("click", '.add_rating', function() { 

    l.start(); 
    var input = $(this).prev().children('.my_rating'); 
    var score = input.val(); 
    var what_do = input.attr('action_type'); 
    var cur_average = $('.current_average').val(); 

    var data = {}; 
    data.score = score; 
    data.media_id = <?php echo $title_data->media_id; ?>; 
    data.what_do = what_do; 

    $.ajax({ 
     dataType: "json", 
     type: 'post', 
     url: 'jquery/actions/add_remove_rating', 
     data: data, 
     success: function(data) { 

      if (data.comm === 'success') { 

       //do some other stuff there, irrelevant 

       $('.ladda-button').removeClass('btn-primary'); 
       $('.ladda-button').removeClass('btn-sm'); 
       $('.ladda-button').addClass('btn-danger btn-xs'); 
       $('.ladda-label').html('Remove'); 
       $('.ladda-button').addClass('remove_rating'); <-- add the remove rating class I want to call if the button is clicked again 
       input.attr('action_type', 'remove_rating'); 

       l.stop(); 
      } 
     } 
    }); 

    $('.remove_rating').on('click', function() { <-- this doesn't work, why? 

     alert('remove was clicked'); 

    }); 


}); 

我似乎无法触发此：

$('.remove_rating').on('click', function() { <-- this doesn't work, why? 

     alert('remove was clicked'); 

    }); 

任何帮助表示赞赏！

编辑：在附注中，我实际上并不需要这样做，因为php会根据action_type属性删除或添加分数。我只是想知道为什么它不会触发。

Answer 1

更改您的代码：

$(document).on("click", '.add_rating', function() { 
    l.start(); 
    var input = $(this).prev().children('.my_rating'); 
    var score = input.val(); 
    var what_do = input.attr('action_type'); 
    var cur_average = $('.current_average').val(); 
    var data = {}; 
    data.score = score; 
    data.media_id = <?php echo $title_data->media_id; ?>; 
    data.what_do = what_do; 
    $.ajax({ 
     dataType: "json", 
     type: 'post', 
     url: 'jquery/actions/add_remove_rating', 
     data: data, 
     success: function(data) { 
      if (data.comm === 'success') { 
       //do some other stuff there, irrelevant 
       $('.ladda-button').removeClass('btn-primary'); 
       $('.ladda-button').removeClass('btn-sm'); 
       $('.ladda-button').addClass('btn-danger btn-xs'); 
       $('.ladda-label').html('Remove'); 
       $('.ladda-button').addClass('remove_rating'); <-- add the remove rating class I want to call if the button is clicked again 
       input.attr('action_type', 'remove_rating'); 
       l.stop(); 
       $('.remove_rating').on('click', function() { <-- this doesn't work, why? 
        alert('remove was clicked'); 
       }); 
      } 
     } 
    }); 
}); 

说明：

先看看这里：Understanding Event Delegation。
当您需要为尚不存在的元素创建事件处理程序时使用事件委托。你动态地给元素添加一个.remove_rating类，然而你甚至在附加之前试图将一个处理程序附加到具有上述类的元素。

当异步ajax调用返回时，在success函数中，您正在附加类，但是您的事件处理程序块在发送ajax后立即处理，而不是在ajax返回后处理（ajax是async rememeber？）。因此，您需要等到ajax返回并创建元素，然后才将处理程序附加到它们。

另外，使用事件代表团，您可以将处理程序附加到文件，就像你在下面一行所做的：

$(document).on("click", '.add_rating', function() { 

这意味着，您附加的处理程序文档，每当任何元素ON单击该文档，如果该元素具有类'.add_rating'，则执行处理程序。

因此，你可以将另一个处理程序文件监视在与.remove_rating类元素的点击次数如下：

$(document).on("click", '.remove_rating', function() { 

这就是所谓的事件委托，因为你委托的事件父元素。

Answer 2

因为在初始化事件click之后添加了类。您需要使用实时事件处理程序，如下所示：

$(document).on('click', '.remove_rating', function() { 

在这种情况下.remove_rating点击处理程序将工作在动态创建的元素和类名的更改。