Schaltfläche Ändern id und Wert macht click() Ereignis nicht

Question

Ich habe eine Taste auf meiner Seite wie folgt aus:

<input type='button' class='act' id='save' value='save'/> 

Innerhalb der Seite, die ich ein paar Klick-Funktionen haben, zB:

$("#save").click(function() { 
    alert ('save'); 
}) 

$("#update").click(function() { 
    alert ('update'); 
}) 

Mit der folgenden jquery an einer anderen Stelle auf der Seite ändere ich den Button-Wert und die ID.

$(".act").attr("id", "save").attr("value", "save"); 

ODER

$(".act").attr("id", "update").attr("value", "update"); 

am Elemente Blick auf die Schaltflächen-ID und den Wert sehen kann, werden aktualisiert. Aber die Klickfunktionen schlagen nach der Änderung fehl.

Beim ersten Laden funktioniert der Klick auf "Speichern", da die Schaltfläche die ID speichert, nach der Änderung hat das Element die ID "update", aber der Klick auf das Update wird nicht ausgelöst.

Was mache ich falsch?

Dank

Answer 1

Ändern der id ein Element ist keine gute Idee, da sie statisch sein sollen.

Der genannte Code funktioniert nicht, da Sie die Event-Handler beim Laden des DOM anhängen. Daher ist das gleiche Ereignis an das Element gebunden, unabhängig von dessen id. Um das zu erreichen, was Sie benötigen Sie benötigen einen delegierten Event-Handler zu verwenden, wie folgt aus:

$(document).on('click', "#save", function() { 
    console.log('save'); 
}).on('click', "#update", function() { 
    console.log('update'); 
}); 

Beachten Sie, dass document verwendet wird hier nur als ein Beispiel. Im Produktionscode sollten Sie das nächstliegende Elternelement verwenden, das beim Laden der Seite im DOM verfügbar ist.

Answer 2

Sie ändern die ID-ID des Elements, Sie benötigen eine Ereignisdelegierung, um das Ereignis an das dynamisch hinzugefügte Element anzuhängen.

Aber es ist nicht notwendig, verschiedene Handler nur zum Umschalten des Wertes der Taste zu erstellen. Sie können einfach den Wert und Alarm und setzte neuen Wert nach um es zu bekommen:

$("#save").click(function() { 
var _this = $(this); 
if(_this.val() == "save"){ 
    alert('save'); 
    _this.val('update'); 
}else{ 
    alert('update'); 
    _this.val('save'); 
    } 
}); 

Answer 3

Sie müssen die Klasse lesen. Jquery erstellt beim Laden der Seite die Verknüpfungen mit den Objekten und kann ein Objekt nicht mit einem neuen ID-Wert referenzieren.

$(".act").click(function() { 
     var idobject = $(this).attr("id"); 
     alert($('#'+idobject).val()); 
    }); 

Answer 4

versuchen dieses

$("#btn1").click(function() { 
window.alert("im changing id to btn2 and ho ho ho"); 
$("#btn1").val("ho ho ho"); 
$("#btn1").attr("id", "btn2"); 

$("#btn2").unbind("click").click(function() { 
    window.alert("im changing id to btn1 and hey hey"); 
    $("#btn2").val("hey hey"); 
    $("#btn2").attr("id", "btn1");  
}); 
}); 

oder Delegatmethode

$("#btn1").parent().on("click","#btn1", function() { 
    window.alert("im changing id to btn2 and ho ho ho"); 
    $("#btn1").val("ho ho ho"); 
    $("#btn1").attr("id", "btn2"); 
}) 
.on("click","#btn2",function() { 
    window.alert("im changing id to btn1 and hey hey"); 
    $("#btn2").val("hey hey"); 
    $("#btn2").attr("id", "btn1");  
}); 

How to change the attr and id of a button after clicking? using jquery?