La boîte de dialogue jQuery ne fonctionne pas pour l'élément créé de manière dynamique - javascript, jquery, html

Je travaille avec le dialogue jQuery. J'ai un problème qui essaye de résoudre cela est:

J'ai créé le dialogue sur le clic de la classe d'ancrage et son fonctionnement. Ensuite, j'ai créé une balise d'ancrage supplémentaire avec la même classe et, en un clic, le dialogue de la nouvelle balise créée ne fonctionne pas.

Voici html:

<div id="loader_ajax"></div>
<a id="show_hide_window1" class="show_hide_window" href=""> Dialog </a>
<div class="next_tg"></div>

Voici le code jQuery:

$(function(){
$(".show_hide_window").click(function(){
showDialog();
});
$(".next_tg").html("<a class="show_hide_window" href=""> Dialog Created By Jquery </a>");
});
function showDialog()
{
$("#loader_ajax").dialog({ modal: true, height: 400,width:650,title: title });
return false;
}

J'ai déjà essayé avec délégation (Event liant), cela ne fonctionne pas. Pour une ancre créée dynamiquement, une erreur est générée dans la console: TypeError: $ (...). Dialog n'est pas une fonction.

S'il vous plaît aider! Merci

Réponses:

1 pour la réponse № 1

Vous pouvez actuellement lier l'événement click à des élémentsprésents dans le DOM lors de l’exécution du code de liaison. Vous avez besoin d'une délégation d'événements pour les éléments créés dynamiquement. Vous devez également ajouter le nouvel élément de création à DOM. Supposons que vous souhaitiez ajouter des éléments à loader_ajax

Ici le parent statique pourrait être n’importe quel élément html, dans votre cas ce serait loader_ajax

Votre code serait

 $("#loader_ajax").on("click",".show_hide_window", function(){
showDialog();
});


var newTextBoxDiv = $(document.createElement("div"));
newTextBoxDiv.html("<a class="show_hide_window" href=""> Dialog Created By Jquery </a>");
$("#loader_ajax").append(newTextBoxDiv);

Événements délégués

Les événements délégués ont l’avantage de pouvoirtraiter les événements de les éléments descendants ajoutés au document ultérieurement. Par choisir un élément qui est garanti d'être présent au moment de la gestionnaire d'événements délégué est attaché, vous pouvez utiliser des événements délégués pour évitez la nécessité d'attacher et de supprimer fréquemment des gestionnaires d'événements.

---

0 pour la réponse № 2

Utiliser sur événement. Cela gérera les éléments ajoutés dynamiquement.

$(function(){

$("body").on("click", ".show_hide_window", function() {
showDialog();
})

$(".next_tg").html("<a class="show_hide_window" href=""> Dialog Created By Jquery </a>");



});

Violon: http://jsfiddle.net/fqt0yztb/

Référence : Dans jQuery, comment attacher des événements à des éléments HTML dynamiques?

---

0 pour la réponse № 3

Je l'ai fabriqué à partir de mon propre code. Maintenant, la boîte de dialogue fonctionne correctement pour un élément créé dynamiquement. violon

$(document).on("click", ".show_hide_window", function (evt) {
var dialog = $("<div></div>").append("<img src="/images/../images/themeroller.gif"/>");
var getContentUrl = $(this).attr("href");
dialog.load(getContentUrl + " #content").dialog({
title: $(this).attr("title"),
modal: true,
height: 400,
width:650
});
dialog.dialog("open");
return false;
});

---