獲取按鈕單擊事件處理程序以多次觸發

Question

我有很多行：

var goal_index = 2;

我有一個函數，該函數使用兩個按鈕創建一些行（默認為2行）：廢紙（（刪除行），添加（添加注釋行）。

        // 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

您必須使用事件委托 。 事件“冒泡”了DOM，而jQuery使利用它變得容易：

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

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

這樣，您就說：“當'click'事件到達DOM的頂部，並且它來自與類'add_btn'相匹配的元素時，請執行此操作。” 因為您只在DOM的頂部安裝了一個處理程序，所以它不會消​​失，它將捕獲從一開始就存在的元素以及后來添加的元素中的那些事件。

將直接在元素上直接設置的事件處理程序中為您設置this值。