javascript - 事件委托(delegate)不工作jquery

Question

所以我才刚刚开始使用事件委托(delegate)，但我仍然对它很困惑，但这里是:

我有一个在 ajax 中添加评级的按钮，再次单击后我希望它删除评级，这是带有注释的代码(删除了一些部分以使其看起来更清晰)。

$(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 .
当您需要为尚不存在的元素创建事件处理程序时，将使用事件委托(delegate)。您向元素动态添加了一个 .remove_rating 类，但是您试图在附加处理程序之前将处理程序附加到具有上述类的元素。

当异步 ajax 调用返回时，您在 success 函数中附加类，但是您的事件处理程序 block 在您发送 ajax 之后立即处理，而不是在 ajax 返回之后(ajax异步还记得吗？)。因此，您需要等到 ajax 返回并创建元素，然后才将处理程序附加到它们。

或者，使用事件委托(delegate)，您可以将处理程序附加到文档，就像您在以下行中所做的那样:

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

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

因此，您可以将另一个处理程序附加到文档以监控对具有 .remove_rating 类的元素的点击，如下所示:

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

这称为事件委托(delegate)，因为您将事件委托(delegate)给父元素。