jquery - 单击处理程序触发事件仅一次

Question

我有这段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>');

Answer 1

使用 jQuery 的one()命令：

$('#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 有一个只执行一次处理程序的内置方法 - 使用它！:)

Answer 2

您可以在 click 事件中执行此操作：

var $viewport = $('.bx-viewport');
if($viewport.find('#slide-me').length === 0)
     $viewport.prepend('<div id="slide-me"></div>');

• 首先缓存bx-viewport元素。
• Incase，slide-me尚未插入bx-viewport元素的开头，然后添加元素，否则什么也不做。