Wie ändere ich ein Onclick-Ereignis mit jquery?

Ich habe eine JS-Datei erstellt, in der ich die dynamische Tabelle erstelle und das Klickereignis für den Kalender dynamisch ändere, aber auf das Kalenderbild für die dynamisch generierte Tabelle klicke, Kalender-Popup im vorherigen Kalenderbild. Bitte hilf mir

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

Sie können das onclickEreignis eines Elements mit jQuery einfach ändern, ohne die neue Funktion auszuführen mit:

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

Durch das Schreiben dieser Zeile ändern Sie tatsächlich das onclickAttribut von #id.

Sie können auch verwenden:

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

Entfernen Sie den alten Ereignishandler

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

Und befestigen Sie den neuen

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

Aktualisierung dieses Beitrags (2015): Unbind / Bind sollte nicht mehr mit jQuery 1.7+ verwendet werden. Verwenden Sie stattdessen die Funktion off (). Beispiel:

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

Stellen Sie sicher, dass Sie in .click eine Nicht-Parameter-Funktion aufrufen, da diese sonst ignoriert wird.

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

Derzeit (11. Juli 2015) funktioniert diese Lösung noch (jquery 2.1.4). Meiner Meinung nach ist es das Beste, was man abholen kann.

Wenn Sie ein bestimmtes Onclick-Ereignis mit jQuery ändern möchten, verwenden Sie besser die Funktionen .on () und .off () mit einem Namespace (siehe Dokumentation).

Verwenden .on()Sie diese Option , um Ihr Ereignis zu erstellen und .off()zu entfernen. Sie können auch ein globales Objekt erstellen g_specific_events_set = {};, um Duplikate zu vermeiden:

$('#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) Ich habe verwendet $('#'+id).removeAttr().off('click').on('click', function(){...});

Ich habe es versucht $('#'+id).off().on(...), aber es würde nicht funktionieren, das onClick-Attribut jedes Mal zurückzusetzen, wenn es zum Zurücksetzen aufgerufen wurde.

Ich halte mich .on('click',function(){...});immer davon fern, alle meine Javascript-Funktionen zitieren zu müssen.

Das OP könnte nun verwenden:

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

Dies kam für mich zum Ausdruck, als mein div mit dem statisch festgelegten onClick-Attribut festgelegt wurde:

<div onclick = '...'>

Andernfalls hätte ich das verwendet, wenn ich nur einen Hörer dynamisch angehängt hätte $('#'+id).off().on('click', function(){...});.

Ohne das Aus ('Klicken') wurden meine onClick-Listener angehängt und nicht ersetzt.

@Amirali

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

wirft:

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

in Chrom.

Element existiert und wird in der Konsole ausgegeben;