取得按鈕單擊事件處理火災不止一次

我行的數量：取得按鈕單擊事件處理火災不止一次

var goal_index = 2;

而且我有一個函數，它創建一些行（默認值2行），有兩個按鈕：垃圾桶（刪除行），添加（添加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(); 
    });

但是，他們的工作有一段時間，之後按鈕保持非活動狀態，不起作用。我該如何解決這個錯誤？謝謝

來源

2014-11-08 Martin Eston

它只能工作一次，因爲您創建了一個新的按鈕，當添加事件處理程序時它不在那裏。改用委託事件處理程序。 – adeneo 2014-11-08 14:16:56

你必須使用事件代表團。活動「泡沫」了DOM和jQuery可以很容易利用這一點：

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

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

通過這樣做，你說，「當一個‘click’事件到達DOM的頂部，它來了從類'add_btn'匹配的元素，做這個東西。「因爲您已經在DOM的頂部安裝了一個處理程序，它不會消失，它會從一開始就存在的元素以及稍後添加的元素中捕獲這些事件。

將爲您設置的值爲this，完全像設置在元素上的事件處理程序一樣。

來源

2014-11-08 14:17:10 Pointy

非常感謝！它正在工作！ – 2014-11-08 14:24:08

取得按鈕單擊事件處理火災不止一次

回答

相關問題