How to change onclick event with jquery?

Question

I am creating a js file in which I am creating a dynamic table and dynamically changing the click event for the calendar, but by naming the calendar image for the dynamically created table, the calendar popup in the previous calendar image. Please help me

the 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'); } }); }); 

Answer 1

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

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

By writing this line, you will actually change the onclick attribute to #id .

You can also use:

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

Answer 2

Delete the old event handler

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

And add a new one

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

Answer 3

Update for this post (2015): unbind / bind should no longer be used with jQuery 1.7+. Use the off () function instead. Example:

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

Make sure you call the nonparametric function in .click, otherwise it will be ignored.

Answer 4

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

Now (July 11, 2015) this solution is still working (jquery 2.1.4); in my opinion, this is the best choice.

Answer 5

If you want to change one specific onclick event using jQuery, it is better to use 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, for example g_specific_events_set = {}; To avoid duplication:

 $('#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> 

Answer 6

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

I tried $('#'+id).off().on(...) , but resetting the onClick attribute on every call to reset will fail.

I am using .on('click',function(){...}); to avoid having to quote the lock of all my JavaScript functions.

O.P. can now use:

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

For me, this happened when my div was set with the onClick attribute statically set:

<div onclick = '...'>

Otherwise, if I only had a dynamically connected listener, I would use $('#'+id).off().on('click', function(){...}); .

Without turning off ('click'), my onClick listeners were added, not replaced.

Answer 7

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

The item exists and is reset in the console;