Rebind current function after ajax failure?

I have a function that is bound using live():

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).at开发者_开发问答tr("rel");
    $(this).die( "click" ).addClass("disabled");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        

            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) {    // success




            } else {                                // failure

                // rebind function here

            }

        }

    });     
});

I am using .die() to unbind all live events from the element on the first click, but what I need to do is rebind this whole block of code to that element IF THE AJAX REQUEST RETURNS AN ERROR CODE ( < 200 ).

How would I accomplish this? I essentially need to restore the bindings.

Regards, Barry

---

EDIT As of jQuery 1.7, the recommended method of reacting to events is .on().

---

Just don't remove the bindings before you are sure you won't need them anymore.

$('.wink-back').on("click", function( event ) {      // jQuery >= 1.7
// $('.wink-back').live("click", function( event ) { // jQuery <  1.7
    var $this = $(this);
    var uid = $this.attr("rel");

    if (!$this.hasClass("disabled")) {
      $this.addClass("disabled");

      $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        
            var newData = JSON.parse( data );

            if ( newData.Message.code == 200 ) { // success
                $this.off("click");     // jQuery >= 1.7
                // $this.die("click");  // jQuery <  1.7
            } else {
                $this.removeClass("disabled");
            }
        }
      });
    }     
});

---

It seems you're dying prematurely, so to speak. Would it not make more sense to remove the click event bindings once you're sure the Ajax request has actually been successful?

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("rel");

    $.ajax({
        type    : "POST",
        cache   : false,
        data    : "data[Wink][recipient_id]=" + uid,
        url     : "/winks/sendWink",
        success : function( data ) {        


            $(this).die( "click" ).addClass("disabled");
            var newData = JSON.parse( data );



        }

    });     
});

Given that your problem is essentially that you want to prevent multiple Ajax requests once the link has been clicked, jQuery provides a number of global Ajax event handlers that can be enacted for any Ajax action.

Regarding your specific problem, you want to disable your clicked link whenever a new Ajax request is started and, assuming it's successful, remove the click event binding for that element.

Here's how you'd do it.

First, we'll set up two global event listeners for any Ajax request so that we can disable the UI until the action is completed; one for when the Ajax request starts, the other for when it's finished:

$('#my-Element-Containing-All-WinkBack-Class-Elements').ajaxStart(function() {
  // Show an overlay over the whole page or
  // over your element containing your links with
  // opacity 0 so that any elements cannot be clicked.
}).ajaxStop(function() {
  // Remove the overlay
});

So what we're doing here is listening for any request to start. As soon as one begins, we prevent any further clicks on the page (or other page region - as required) by adding a transparent overlay using CSS along these lines:

.page-overlay {
    z-index: 10000;
    filter: alpha(opacity=0); /*older IE*/
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* IE */
    -khtml-opacity: 0;   /*older Safari*/
    opacity: 0;   /*supported by current Mozilla, Safari, and Opera*/
    position: absolute; top:0; left:0; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}

Your page gets re-enabled once the request finishes by removing this overlay in the .ajaxStop() method.

Your actual click event binding gets handled as I've already suggested.

---

use below function for prevent multiple ajax request.

jQuery('a.' + selectedTab + '-list-page').die();

jQuery('a.' + selectedTab + '-list-page').live('click', function() {