Home » Jquery » how to change onclick event with jquery?

how to change onclick event with jquery?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

You can change easily onclick event of an elemt by jquery without runing the new function by

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

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

you also can use

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

Questions:
Answers:

Remove the old event handler

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

And attach the new one

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

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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>

Questions:
Answers:

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