事件委派不起作用jquery

Event delegation not working jquery

本文关键字：jquery 不起作用 委派 事件      更新时间：2023-09-26

所以我才刚刚开始事件委派，我仍然对此感到困惑，但现在是：

我有一个在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属性的分数时，我实际上不需要这样做。我只是想知道为什么它没有触发。

将代码更改为：

$(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类添加到元素中，但在附加之前，您正试图将处理程序附加到具有上述类的元素中。

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

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

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

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

因此，您可以将另一个处理程序附加到文档中，以使用.remove_rating类监视元素上的点击，如下所示：

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

这称为事件委派，因为您将事件委派给父元素。

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

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

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

相关文章：