Remplacement du bouton html par jquery

Question

J'ai fait des recherches sur la façon de remplacer/changer le bouton html original par un autre. Mais ni les moyens ne fonctionnent.

Voici mes codes:

Javascript:

var editBtn = "editBtn" + id; //in order to get the id of the edit button 
var cSave = document.getElementById(editBtn); 
cSave.innerHTML = "<td><button id='saveBtn' onclick='saveChange(" + id + ");' >Save</button></td>"; 

Le code ci-dessus est juste un bouton à l'intérieur ajoutant le bouton existant.

HTML:

<table> 
<td> 
<% 
    out.println("<button id='editBtn" + mc.getId() + "' onclick='editMC(this.id);'>Edit</button>"); 
%> 
</td> 
</table> 

Le mc.getId() est une méthode pour obtenir le "id".

La dernière approche que j'ai essayé est mentionné ci-dessous, mais il ne fonctionne pas:

document.getElementById(editBtn).onclick = function() {saveChange(id)}; 

Et:

$(document).ready(function() { 
     $("#editBtn").replaceWith("<td><button id='saveBtn' onclick='saveChange(" + mcId + ");' >Save</button></td>"); 
}); 

Quoi qu'il en soit, je peux faire pour changer le bouton d'édition pour sauver le bouton tout en onclick() est effectué?

Answer 1

Vous pouvez modifier le texte du bouton de Modifier pour enregistrer à l'aide innerHtml. Vous mettez actuellement du code HTML dans l'élément du bouton. Essayez

var cSave = document.getElementById(editBtn); 
cSave.innerHTML = "Save"; 
cSave.onclick = function() {saveChange(id)}; 

Answer 2

Emballez l'ID entre guillemets (sauf si c'est un nom variable):

document.getElementById("editBtn"); 

en jQuery il serait entre ces lignes:

var mcId = 'bla'; 

function saveChange(){ 
    alert(mcId); 
} 


$(function() { // DOM ready shorthand 


    $("#editBtn").click(function(){ 
     $(this).replaceWith("<button id='saveBtn'>Save</button>"); 
    }); 

    // Than, for your dynamically generated element use: 

    $('#parent').on('click', "#saveBtn", function(){ 
    saveChange(mcId); 
    }); 

}); 

jsBin demo

note que je utilisé pour la référence d'un élément statique non dynamique #parent. Vous devriez faire la même chose (pour éviter le collage à $(document) car il est assez cher d'écouter les événements tout le long du DOM).

jQuery .on() with event delegation for dynamically generated elements