我有这个jquery:
$('#team-members .team-thumb').on('click', function(e){
e.preventDefault();
var member = $(this).data('member');
$('#team-members .team-profiles').slideToggle();
teamSlider.reloadSlider({
startSlide: member,
pager: false,
adaptiveHeight: true
});
$('html,body').animate({
scrollTop: $("#team-profiles").offset().top},
'fast');
$('.bx-viewport').prepend('<div id="slide-me"></div>');
});
我如何使它只添加此事件一次,所以在第二次点击它不会添加到DOM:
$('.bx-viewport').prepend('<div id="slide-me"></div>');
答案 0 :(得分:4)
使用jQuery的one()
command:
$('#team-members .team-thumb').one('click', function(e){ ... }
说明:将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。
除了这个内置命令之外,你总是可以使用布尔标志:
var event_handler_enabled = true;
$('#team-members .team-thumb').one('click', function(e){
if ( event_handler_enabled ){
// code for handling click goes here
event_handler_enabled = false; // ensure this code will not be executed again
}
}
我推荐第一个选项。没有理由重新发明轮子。如果jQuery有一个内置的方法只执行一次处理程序 - 使用它! :)
答案 1 :(得分:2)
您可以在点击事件中执行此操作:
var $viewport = $('.bx-viewport');
if($viewport.find('#slide-me').length === 0)
$viewport.prepend('<div id="slide-me"></div>');
bx-viewport
元素。slide-me
尚未插入bx-viewport
元素的开头,然后添加元素,否则什么都不做。