事件委託不工作的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點擊處理程序將工作在動態創建的元素和類名的更改。