La finestra di dialogo jQuery non funziona per l'elemento creato dinamicamente - javascript, jquery, html

Sto lavorando con la finestra di dialogo di jQuery. Ho un problema che provare a risolvere è:

Ho creato la finestra di dialogo sul clic di classe di ancoraggio e il suo funzionamento. Successivamente, ho creato un altro tag di ancoraggio con la stessa classe e al momento del clic del nuovo tag di dialogo creato non funziona.

Ecco html:

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

Ecco il codice 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;
}

Ho già provato con la delega (Event binding) che non funziona. Per l'ancoraggio creato dinamicamente dà errore nella console: TypeError: $ (...). Dialog non è una funzione

Per favore aiuto!! Grazie

risposte:

1 per risposta № 1

Al momento è possibile associare l'evento click agli elementiche sono presenti nel DOM quando il codice di binding viene eseguito. È necessaria la delega degli eventi per gli elementi creati dinamicamente. Devi anche aggiungere il nuovo elemento di creazione a DOM, supponi di voler aggiungere loader_ajax

Qui genitore statico potrebbe essere un qualsiasi elemento html, nel tuo caso lo sarebbe loader_ajax

Il tuo codice sarebbe

 $("#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);

Eventi delegati

Gli eventi delegati hanno il vantaggio che possonoelaborare eventi da elementi discendenti che vengono aggiunti al documento in un secondo momento. Di scegliere un elemento che è garantito per essere presente al momento il il gestore di eventi delegato è collegato, è possibile utilizzare eventi delegati a evitare la necessità di collegare e rimuovere frequentemente gestori di eventi.

---

0 per risposta № 2

Usa sull'evento. Questo gestirà elementi aggiunti dinamicamente.

$(function(){

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

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



});

Fiddle: http://jsfiddle.net/fqt0yztb/

Riferimento: In jQuery, come allegare eventi ad elementi html dinamici?

---

0 per risposta № 3

Ho fatto il mio codice. Ora la finestra di dialogo funziona correttamente per l'elemento creato dinamicamente. violino

$(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;
});

---