how to change onclick event with jquery?

I have create a js file in which i am creating the dynamic table and dynamically changing the click event for the calendar but onclicking the calender image for dynamic generated table, calendar popup in the previous calendar image. Please help me

code

/***------------------------------------------------------------
* 
*Developer: Vipin Sharma
* 
*Creation Date:	20/12/2010 (dd/mm/yyyy)
* 
*ModifiedDate	ModifiedBy		Comments (As and when)
* 
*-------------------------------------------------------------*/
var jq = jQuery.noConflict();
var ia = 1;
jq(document).ready(function(){
	jq("#subtaskid1").click(function() {
		if(ia<=10){
	  var create_table = jq("#orgtable").clone();
	  create_table.find("input").each(function() {
	    jq(this).attr({
	      'id': function(_, id) { return ia + id },
	      'name': function(_, name) { return ia + name },
	      'value': ''               
	    });
	  }).end();
	  create_table.find("select").each(function(){
	  		jq(this).attr({
	  			'name': function(_,name){ return ia + name }
	  		});
	  }).end();
	  create_table.find("textarea").each(function(){
	  		jq(this).attr({
	  			'name': function(_,name){ return ia + name }
	  		});
	  }).end();
	  create_table.find("#f_trigger_c").each(function(){
	  		var oclk = " displayCalendar(document.prjectFrm['"+ ia +"dtSubDate'],'yyyy-mm-dd', this)";                          //ERROR IS HERE
	  		var newclick = new Function(oclk);
	  		jq(this).click(newclick);
	  }).end();
	  create_table.appendTo("#subtbl");
	  jq('#maxval').val(ia);
	  ia++;
		}else{
			var ai = ia-1;
			alert('Only ' + ai + ' SubTask can be insert');
		}
	});
});

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.

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.

@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;