Question

我有一定数量的行：

var goal_index = 2;

我有一个函数，它创建了一些行（默认2行），带有两个按钮：Trash（删除行），add（添加anoter行）。

        // Creating Goals
        var goals_creating = function(){
            var goals_area = $('.goalsArea'),
                add_button = $('<span class="add_btn"></span>'),
                trash_button = $('<span class="trash_btn"></span>');

            goals_area.html('');

            for(var i = 0, j = 1; i < goal_index; i++, j++ ){
                goals_area.append(
                    '<div class="row" data-trashgoal = ' + i + '>' +
                        '<div class="col-lg-1">' +
                        '<span class="trash_btn" data-trashgoal = ' + i + '></span>' +
                        '</div>' +
                    '</div>'
                );
            }
            // Last trash tag
            var last_trash_btn = $('.trash_btn').last();
            // Insert after last trash button
            last_trash_btn.after(add_button);
        };

在功能的最后部分，我在最后一行插入按钮（添加）。然后运行我的功能：

goals_creating();

运行后，我为两个按钮（添加）和（删除）创建了两个事件：

    $('.add_btn').on('click', function(){
        goal_index++;
        goals_creating();
    });

    $('.trash_btn').on('click', function(){
        var goal_to_del = $(this).data('trashgoal');
        $('.row[data-trashgoal="' + goal_to_del + '"]').remove();
        goal_index--;
        goals_creating();
    });

但是，他们正在工作一次，因为按钮保持不活动状态，并且不起作用。我该如何解决这个错误？感谢

Answer 1

您必须使用事件委派。事件＆＃34;泡沫＆＃34;在DOM上，jQuery可以很容易地利用它：

$(document).on('click', '.add_btn', function() { /* as before */ });

$(document).on('click', '.trash_btn', function() { /* as before */ });

通过这样做，你说，＆＃34;当点击＆＃39; event到达DOM的顶部，它来自一个与class＆quot; add_btn＆＃39;匹配的元素，做这个东西。＆＃34;因为您已经在DOM的顶部安装了一个处理程序，它不会消失，它会从开头的元素以及之后添加的元素中捕获这些事件

将为您设置this的值，就像在直接在元素上设置的事件处理程序中一样。

获取按钮单击事件处理程序以多次触发

1 个答案: