I disabled the click event of image using unbind method. But I don't know how to recover the click event again. Here is the code,

<img src="testimg.jpg" id="sub_form">

disabled the click event of above image using the code

$('#sub_form').unbind('click');

How do i recover the click event? I tried with the bind event

  $('#sub_form').bind('click');

but it wont work.

Why I'm going for click event of image is ajax form submission. The code is,

$("#sub_form").click(function() {
var input_data = $('#testform').serialize();
    $.ajax({ 
//my code
});
});

how can i achieve this after unbind of image is performed.

I disabled the click event of image using unbind method. But I don't know how to recover the click event again. Here is the code,

<img src="testimg.jpg" id="sub_form">

disabled the click event of above image using the code

$('#sub_form').unbind('click');

How do i recover the click event? I tried with the bind event

  $('#sub_form').bind('click');

but it wont work.

Why I'm going for click event of image is ajax form submission. The code is,

$("#sub_form").click(function() {
var input_data = $('#testform').serialize();
    $.ajax({ 
//my code
});
});

how can i achieve this after unbind of image is performed.

• javascript
• jquery

• .bind() has two methods. You need to pass in the function reference when rebinding. – JohnP Commented Mar 29, 2012 at 9:58
• you need to add the handler parameter as the 2nd parameter – Daxcode Commented Mar 29, 2012 at 9:59

3 Answers 3

If you saved the handler, you can just invoke it again:

var handler = function() {
    alert('click');
};

$('#sub_form').click(handler);

// disabling:
$('#sub_form').unbind('click', handler);

// reenabling:
$('#sub_form').click(handler);

If you don’t know what handlers that are bound, you can find and save them before unbinding:

// save the click handlers
var events = $('#sub_form').data('events'),
    handlers = 'click' in events ? Array.prototype.slice.call(events.click) : [],
    handler = function() {
        $.each(handlers, function() {
            this.handler();
        });
    };

// disable
$('#sub_form').unbind('click');

// reenable
$('#sub_form').bind('click', handler);​

http://jsfiddle/sPPnE/

You can specify a function reference when calling .unbind():

For instance:

function myHandler( event ) {
}

// bind the click handler
$('#sub_form').bind('click', myHandler);

// remove only this exact click handler
$('#sub_form').unbind('click', myHandler);

// bind it again
$('#sub_form').bind('click', myHandler);

Sidenote: As for jQuery 1.7.x you should use the .on() and .off() equivalent methods.

Reference: .on(), .off(), .bind(), .unbind()

You need to provide the event handler with a function to run when the event occurs, try this:

$('#sub_form').bind('click', function() {
    alert("You clicked #sub_form");
});

If you are going to be binding/unbinding regularly, it would be best to put the logic into it's own function so that it can be easily rebound:

$("#element").click(function() {
    $("#sub_form").unbind();

    // do something

    $("#sub_form").bind('click', myFunc);
});

function myFunc() {
    alert("You clicked #sub_form");
}