Jquery replaceWith() dans la boucle avec des événements click

Question

en essayant de remplacer divers éléments par un autre dans une boucle jquery .each et de les donner sur des événements click à leurs nœuds enfants, mais cela ne fonctionne pas, voici mon code.

var replacer = function() { 
    var elementbody = "<div class='Container'><div class='Button'></div></div>"; 
    $('.myclass').each(function (index, element) { 
    $(element).replaceWith(elementBody); 
    $(element).find('.Button').click(function() { 
    //------------------To do on click event------------------// 
}); 
}; 

Answer 1

Après avoir utilisé

$(element).replaceWith(...); 

element fait toujours référence à l'ancien élément, et non pas les éléments qui l'ont remplacé. Donc $(element).find('.Button') ne trouve pas le bouton que vous venez d'ajouter.

Au lieu d'ajouter le gestionnaire à chaque élément que vous ajoutez, utilisez délégation pour lier un gestionnaire juste une fois, comme expliqué dans Event binding on dynamically created elements?

$("someSelector").on("click", ".Button", function() { 
    ... 
}); 

Answer 2

Vous pouvez utiliser un délégué comme Barmar suggère ou vous pourriez vous offrir un nouvel objet jquery qui fait référence à votre nouveau contenu avant d'exécuter le replaceWith

Quelque chose comme ça, peut-être:

new_element = $('<div><button>Hello World</button></div'); 
$(element).replaceWith(new_element); 
new_element.find('button').on('click', function(e) { 
    console.log(e); 
});