die（）将jQuery live（'click'）带回生活

Question

我有一个分配给日历上的点击事件的功能 - 我需要live()中的点击事件，因为标准.click()不会将自己绑定到您在日历 - 根据所选的日历日期触发一些AJAX。

我需要阻止用户在上一个请求完成之前再触发任何AJAX，以便立即解除点击监听器与.die('click')的绑定。但是，我无法使用$('.eventWrap').live('click')从其内部再次使eventWrap点击侦听器恢复生机。

我的问题有解决方法吗？

$('.eventWrap').live('click', function() {
     $('.eventWrap').die('click');

     do ajax stuff

     //bring the .eventWrap click listener back to life
     //$(.eventWrap).live('click'); does not work as I had hoped

}

Answer 1

你可以简单地在点击中添加一个类，如果该类不存在则只执行ajax

$('.eventWrap').live('click', function() {
    if( ! $('.waitingForAjax').length ){
        $('.eventWrap').addClass('waitingForAjax');

         do ajax stuff- use removeClass() within the ajax success handler
    } else{
        alert('Waiting for last ajax to complete');
    }   
});

如果使用jQuery 1.7

，请使用on()代替live()

Answer 2

根据您的代码

不推荐使用直播，因此请使用.on()和.off()

$('.eventWrap').on('click', function() {
     $('.eventWrap').off('click');

});

要重新启动该事件，请使用

$('.eventWrap').on('click');

如果在页面加载后附加到DOM

如果你在页面加载后.eventWrap附加到dom那么你应该去委托事件

 $('#container').on('click', '.eventWrap',function() {
     $('#container').off('click', '.eventWrap');
});

取消绑定该事件

     $('#container').off('click', '.eventWrap');

此处#container指向页面加载时属于DOM的.eventWrap容器，您可能有一些其他选择器指向.eventWrap的容器。

但更好的是使用重构

    function offmyevent() {
       $('#container').off('click', '.evetWraooer');
    }


    function offmyevent() {
       $('#container').on('click', '.evetWraooer');
    }

   $('#container').on('click', '.eventWrap',function() {
         offmyevent();
         callMyAjax();
   });

所以对于ajax呼叫问题

function callMyAjax() {
  $.ajax({
      url: '',
      data: '',
      method: '...',
      success: function() {
         onmyevent(); // 
     }
  })

Answer 3

要转换on()和off()事件处理程序，您还需要传递该函数。

$("#container").on("click", ".eventWrap", eventWrapClicked);

function eventWrapClicked(){
    $("#container").off("click", ".eventWrap", eventWrapClicked);

   //Do your AJAX -- on success, reapply the clickhandler.
   // $("#container").on("click", ".eventWrap", eventWrapClicked);
}