Dialog jQuery nefunguje pre prvok vytvorený dynamicky - javascript, jquery, html

Pracujem s dialógovým oknom jQuery. Mám jeden problém, ktorý sa snaží vyriešiť:

Vytvoril som dialógové okno na kliknutie triedy kotvy a jej fungovanie. Potom som vytvoril ešte jednu kotevnú značku s rovnakou triedou a po kliknutí na toto nové dialógové okno nefunguje.

Tu je html:

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

Tu je kód 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;
}

Už som sa snažil s delegovaním (Event binding), že nefunguje. Pre dynamicky vytvorenú kotvu dávajú chybu v konzole: DialError: $ (...) dialógové okno nie je funkciou

Prosím pomôžte!! Vďaka

odpovede:

1 pre odpoveď č. 1

Momentálne môžete viazať udalosť kliknutia na prvkyktoré sú prítomné v DOM, keď sa vykoná záväzný kód. Pre dynamicky vytvorené elementy potrebujete delegovanie udalostí. Tiež je potrebné pridať novo vytvorený prvok do DOM, predpokladajme, že chcete pridať loader_ajax

Tu statický rodič by mohol byť akýkoľvek html element, vo vašom prípade by to bolo loader_ajax

Budeš kód

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

Delegované podujatia

Delegované udalosti majú tú výhodu, ktorú môžuspracovanie udalostí z potomkov, ktoré sú pridané do dokumentu neskôr. podľa vyberanie prvku, u ktorého je zaručené, že bude prítomný v čase Ak je pripojený delegovaný obslužný program udalostí, môžete naň delegované udalosti použiť vyhnúť sa nutnosti často pripájať a odstraňovať obsluhy udalostí.

---

0 pre odpoveď č. 2

Použite na Event. To bude riadiť dynamicky pridané prvky.

$(function(){

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

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



});

Husle: http://jsfiddle.net/fqt0yztb/

Referenčné číslo: Ako v jQuery pripojíte udalosti k dynamickým prvkom html?

---

0 pre odpoveď č. 3

Urobil som to z vlastného kódu. Teraz dialóg úspešne pracuje pre dynamicky vytvorený prvok. husle

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

---