如何用 jquery 改变 onclick 事件？

You can easily change the onclick event of an element with jQuery without running the new function with:

$("#id").attr("onclick","new_function_name()");

By writing this line you actually change the onclick attribute of #id.

You can also use:

document.getElementById("id").attribute("onclick","new_function_name()");

Remove the old event handler

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

And attach the new one

$('#id').click(function(){
// your code here
});

Updating this post (2015) : unbind/bind should not be used anymore with jQuery 1.7+. Use instead the function off(). Example :

$('#id').off('click');
$('#id').click(function(){
myNewFunction();
//Other code etc.
});

Be sure that you call a non-parameter function in .click, otherwise it will be ignored.

$('#id').attr('onclick', 'function()');

Right now (11 Jul 2015) this solution is still working (jquery 2.1.4); in my opinion, it is the best one to pick up.

@Amirali

console.log(document.getElementById("SAVE_FOOTER"));
document.getElementById("SAVE_FOOTER").attribute("onclick","console.log('c')");

throws:

Uncaught TypeError: document.getElementById(...).attribute is not a function

in chrome.

Element exists and is dumped in console;

If you want to change one specific onclick event with jQuery, you better use the functions .on() and .off() with a namespace (see documentation).

Use .on() to create your event and .off() to remove it. You can also create a global object like g_specific_events_set = {}; to avoid duplicates:

$('#alert').click(function()
{
alert('First alert!');
});


g_specific_events_set = {};


add_specific_event = function(namespace)
{
if (!g_specific_events_set[namespace])
{
$('#alert').on('click.' + namespace, function()
{
alert('SECOND ALERT!!!!!!');
});
g_specific_events_set[namespace] = true;
}
};


remove_specific_event = function(namespace)
{
$('#alert').off('click.' + namespace);
g_specific_events_set[namespace] = false;
};






$('#add').click(function(){ add_specific_event('eventnumber2'); });


$('#remove').click(function(){ remove_specific_event('eventnumber2'); });

div {
display:inline-block;
vertical-align:top;
margin:0 5px 1px 5px;
padding:5px 20px;
background:#ddd;
border:1px solid #aaa;
cursor:pointer;
}
div:active {
margin-top:1px;
margin-bottom:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="alert">
Alert
</div>
<div id="add">
Add event
</div>
<div id="remove">
Remove event
</div>

(2019) I used $('#'+id).removeAttr().off('click').on('click', function(){...});

I tried $('#'+id).off().on(...), but it wouldn't work to reset the onClick attribute every time it was called to be reset.

I use .on('click',function(){...}); to stay away from having to quote block all my javascript functions.

The O.P. could now use:

$(this).removeAttr('onclick').off('click').on('click', function(){ displayCalendar(document.prjectFrm[ia + 'dtSubDate'],'yyyy-mm-dd', this); });

Where this came through for me is when my div was set with the onClick attribute set statically:

<div onclick = '...'>

Otherwise, if I only had a dynamically attached a listener to it, I would have used the $('#'+id).off().on('click', function(){...});.

Without the off('click') my onClick listeners were being appended not replaced.