Question

所以我刚刚开始使用事件委托，我仍然对此感到困惑但是这里有：

我有一个在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');

    });

任何帮助表示赞赏！

编辑：在旁注中，我实际上并不需要这个工作，因为如果我们根据action_type属性删除或添加分数，那么PHP会计算出来。我只是想知道为什么它没有触发。

Answer 1

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

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

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

Answer 2

将您的代码更改为：

$(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是异步记忆）？）。因此，您需要等到ajax返回并创建元素，然后才将处理程序附加到它们。

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

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

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

因此，您可以在文档中附加另一个处理程序，以监视具有.remove_rating类的元素的点击次数，如下所示：

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

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

事件委派不工作jquery

2 个答案: