CODEWITHSUNDEEP
jquery
VATSHAL
VATSHAL

Reputation: 1539

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

Upvotes: 85

Views: 246481

Answers (8)

Trần Hữu Hiền
Trần Hữu Hiền

Reputation: 1044

With Jquery, can do it easy.

    $("#id").off('click');
    $("#id").on('click', newFuntionName);

But notice:

newFuntionName-> right, will not fire click

newFuntionName() -> wrong, will fire click event again

Upvotes: 0

Andrey Izotov
Andrey Izotov

Reputation: 870

Remove the old event handler

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

And attach the new one

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

Upvotes: 44

JSG
JSG

Reputation: 430

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

Upvotes: 2

Amirali
Amirali

Reputation: 2466

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()");

Upvotes: 231

pmrotule
pmrotule

Reputation: 9692

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>

Upvotes: 2

wbrzezin
wbrzezin

Reputation: 19

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

Upvotes: 0

Mich. Gio.
Mich. Gio.

Reputation: 301

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

Upvotes: 6

Memo36
Memo36

Reputation: 333

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.

Upvotes: 19

Related Questions