Dynamicky vytvorené odkazy na ukotvenie, ktoré neprijímajú udalosti "kliknutia"? - javascript, jquery, twitter-bootstrap

Používam JS na vytvorenie HTML nižšie. (Jedná sa o rozbaľovacie tlačidlo bootstrapu)

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle my-status" data-toggle="dropdown">
Status <span class="caret"></span>
</button>
<ul class="dropdown-menu status-menu" role="menu">
<li><a href="#" class="status" data-status-id="0">None</a></li>
</ul>
</div>

A v JQuery sa snažím spracovať kliknutia na odkaz vnútri.

$("li").on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

Vyskúšal som 6 rôznych spôsobov, ako vybrať tieto odkazy, ale zdá sa, že nič, čo robím, ich nechytia.

Pretože sa dynamicky vytvárajú, viem, že musím používať funkciu „on“, ale zdá sa, že to nefunguje prinajmenšom.

Môžem si to nechať fungovať v JSFiddle, ale kód, ktorý sa dynamicky nevytvára, je podľa môjho názoru problémom.

Je tu niečo hlúpe zrejmé, že tu chýbaš?

odpovede:

4 pre odpoveď č. 1

Ak je celý tento blok HTML dynamický, musíte zacieľovať na kontajner, ku ktorému je HTML pripojený a použiť on

$(containerOfAppendedContent).on("click", ".btn-group li a", function() {

---

4 pre odpoveď č. 2

Predpokladajme, že celý blok kódu, ktorý ste uverejnili, jevytvorené dynamicky, alebo dokonca iba zoznam, keď sa pripájajú udalosti k dynamicky pridaným prvkom, musíte sa pri vykonávaní kódu viazať na prvky, ktoré sú už v DOM. skúste:

$(document).on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

$(document) je najhorší scenár, takže ak máte prvok bližšie k tým, ktoré sa dynamicky pridávajú a ktorý existuje pri spustení jQuery, použite ho cez dokument.

---

4 pre odpoveď č. 3

Uistite sa, že vyberáte statický rodič, takže ak li je tiež dynamicky vytváraný, použite jeho rodiča alebo jeho rodiča

$("div.btn-group").on("click", "ul li a.status", function(e) {
e.preventDefault();
alert("hi");
});

ak je tento div tiež dynamicky vytváraný, môžete ísť hore na body alebo dokonca document

$(document).on("click", "ul li a.status", function(e) {
e.preventDefault();
alert("hi");
});

---

2 pre odpoveď № 4

Prečo nevygenerujete značku ancor s funkciou onclick?

<li><a href="#" class="status" data-status-id="0" onclick="DoSomething();">None</a></li>
<script>
function DoSomething(){
// Do your work
}
</script>

Dúfam, že to pomôže

---

1 pre odpoveď č. 5

Použi toto zmeniť li na document

$(document).on("click", "a.status", function(e) {
e.preventDefault();
alert("hi");
});

---