取得按钮单击事件处理火灾不止一次

我行的数量：取得按钮单击事件处理火灾不止一次

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

取得按钮单击事件处理火灾不止一次

回答

相关问题