jQuery nefunguje v rámci innerHTML - javascript, jquery, html, innerhtml

Mám funkciu jQuery, pod ktorou sa mení CSS na vznášač p prvku.

$("p").hover (
function() {$(this).addClass("choice"); } ,
function() { $(this).removeClass("choice");} );

Problém je v tom, že nebude fungovať pre vnútornúHTML divu napísanú pomocou .html () alebo .append (), tak ako

$("#div").html("<p>content that needs to highlight on hover</p>");

Dokonca aj keď sa pokúsim vložiť funkciu samotnú do tej vnútornejHTML podobne

$("#div").append("<script type="text/javscript">$("p").hover ( function() {$(this).addClass("choice"); } , function() { $(this).removeClass("choice");} );<"+"/script>");

nebude to naďalej fungovať pre obsah HTML tohto div.

Čo tu chýba? Vďaka, akákoľvek pomoc by bola veľmi cenená.

odpovede:

3 pre odpoveď č. 1

Keď píšete $("p").hover, ktorý robí jednorazové vyhľadávanie aktuálneho stavu dokumentu, nájde všetko <p> tagy a priložené obslužné rutiny udalostí. Nepodarí sa priradiť obslužné rutiny udalostí <p> tagy, ktoré pridáte do dokumentu v budúcnosti.

Ak chcete, aby sa spracovatelia udalostí dostali do budúcnosti <p> tagy, potom musíte použiť .delegate() (pre pre-jQuery 1.7) alebo .on() (pre jQuery 1,7+).

S jQuery 1.7+ by fungovalo takto:

$(document.body)
.on("mouseover", "p", function() {})
.on("mouseout", "p", function() {});

Musíte použiť udalosti myšou a myšou, pretože hover s dvoma samostatnými funkciami spätného volania nie je podporovaná .on() (aspoň to nebolo, keď som naposledy skontroloval).

V ideálnom prípade by ste v tomto kóde nepoužívali document.body, ale použili by ste nejaký spoločný nadradený prvok, ktorý nie je dynamický (už je tam a zostane tam) a je tak hlboko v hierarchii <p> čo sledujete, čo je príliš veľa, čo zabraňuje príliš veľa udalostí, pretože musí bubliny až na úroveň dokumentov a pomáha s výkonom.

---

1 pre odpoveď č. 2

V skutočnosti by som to vyriešil pomocou CSS na rozdiel od javascriptu, pokiaľ by to bolo možné :hover pseudotrieda.

p { /* some css */ }
p:hover { /* hover css */ }

Ak musíte používať javascript, pozrite si odpoveď jfriend00.Pôvodne som mal podobnú odpoveď ako jeho, ale priateľ bol skôr a lepší. Nechám to ako poznámku pre ostatných.

---

0 pre odpoveď č. 3

Musíte použiť funkciu (jQuery 1.7) alebo funkciu Live, ktorá pripojí udalosti k prvkom, ktoré boli vytvorené po načítaní stránky

$("p").on("hover", function()) {
....
}

---