jQuery.off() is not removing binding

Question

For some reason jQuery.off('click') doesn't seem to be working here. When the 'Yes' button is clicked in the model another model just pops up. What am I doing wrong?

code:

$(function(){

  //If there are warnings on the page bind alert
  if ($('.renewal-warning').length > 0){

    (function (){

      $('#signRentalContainer').on('click', '.renewal-warning', function(e){

        var buttonHandle = this;

        //Prevent submission
        e.preventDefault();

        //Show warning model
        $.modal({
          content: $('#renewalWarning').html(),
          title: "Order Renewal Warning",
          buttons: {
            'Yes': function(win) { $(buttonHandle).off('click').click(); },
            'No': function(win) { win.closeModal(); }
          },
          maxWidth: 250,
          closeButton: false
        });
      });
    })();
  }
});

Answer 1

Because the this refer to the context of the handle function, not the function itself.

Try making it a named function, then refer to it when you call off:

$("body").off("click", '#signRentalContainer', buttonHandle);

BTW, any reason we can't use unbind directly here?

$("#signRentalContainer").unbind("click");

Answer 2

Pretty sure you're going to need to provide it the same element, as well as the same selector.

$('#signRentalContainer').off('click', '.renewal-warning');

In the .on() handler, this is the '.renewal-warning' element that was clicked, not the #signRentalContainer element.

---

If there are several of these '.renewal-warning' elements, and you only want to disable one at a time, the simplest way is to change its class so that it no longer matches the selector.

$(this).removeClass('renewal-warning')
       .addClass('renewal-warning-disabled');