CODEWITHSUNDEEP
jquery
Fraser
Fraser

Reputation: 14246

Bringing jQuery live('click') back to life after die()

I have a function assigned to a click event on a calendar - I need the click event in live() because the standard .click() does not bind itself to the newly displayed days when you switch months in the calendar - which triggers some AJAX based on the calendar date selected.

I need to prevent the user from firing any more AJAX until the previous request has completed so achieved this by immediately unbinding the click listener with .die('click'). However, I am unable to bring the eventWrap click listener back to life again with $('.eventWrap').live('click') from within itself it would appear.

Is there a solution to my problem?

$('.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

}

Upvotes: 3

Views: 779

Answers (3)

thecodeparadox
thecodeparadox

Reputation: 87073

According to your code

As live is deprecated so use .on() and .off()

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

});

To rebind that off event use

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

if append to DOM after page load

if you .eventWrap append to dom after page load then you should go for delegate event

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

To unbind that event

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

Here #container point to the container of .eventWrap that belong to DOM at page load, you may have some other selector to point that container of .eventWrap.

but better would be use refactoring

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


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

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

So for ajax call issue

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

Upvotes: 2

charlietfl
charlietfl

Reputation: 171689

You could simply add a class within the click, and only do ajax if the class doesn't exist 

$('.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');
    }   
});

Use on() instead of live() if using jQuery 1.7

Upvotes: 3

ahren
ahren

Reputation: 16959

To turn on() and off() event handlers, you need to pass the function through also.

$("#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);
}

Upvotes: 1

Related Questions