Question

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

$('.wink-back').live( "click", function( event ) {
    var uid = $(this).attr("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

Answer 1

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