[英]Getting button click event handler to fire more than once
我有很多行:
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();
});
但是,它们只工作了一次,之后按钮保持不活动状态,并且不起作用。 如何解决此错误? 谢谢
您必须使用事件委托 。 事件“冒泡”了DOM,而jQuery使利用它变得容易:
$(document).on('click', '.add_btn', function() { /* as before */ });
$(document).on('click', '.trash_btn', function() { /* as before */ });
这样,您就说:“当'click'事件到达DOM的顶部,并且它来自与类'add_btn'相匹配的元素时,请执行此操作。” 因为您只在DOM的顶部安装了一个处理程序,所以它不会消失,它将捕获从一开始就存在的元素以及后来添加的元素中的那些事件。
将直接在元素上直接设置的事件处理程序中为您设置this
值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.