2011-12-31 30 views
13

Mam fragment kodu, który jest dynamicznie ładowany za pośrednictwem wywołania AJAX dołączając wynik do elementu nadrzędnego, podobnego do tego:Mocowanie plugin jQuery dynamicznie obciążonych elementów za pomocą jQuery, na()

<div class="parent"> 
    <!-- Inner content loaded dynamically --> 
    <div class="child"> 
    </div> 
    <div class="child"> 
    </div> 
    <!-- ... --> 
</div> 

teraz, żeby zahaczyć zdarzenie mouseover, chciałbym zrobić coś takiego:

$(".parent").on("mouseenter", ".child", function(){ 
//Do fun stuff here 
} 

$(".parent").on("mouseleave", ".child", function(){ 
//Undo fun stuff here 
} 

to działa wystarczająco dobrze dla standardowych funkcji, ale chcę dołączyć to do wtyczki firm trzecich (w moim przypadku , HoverIntent, ale tak naprawdę każda wtyczka) -

Składnia mocowania wtyczki HoverIntent jest tak:

$(".child").hoverIntent(makeTall, makeShort) 

... ale chcę to do pracy dla mojej dynamicznej treści, które nie były dostępne w momencie dokument wstępnie załadowany, a coś $(".parent").on("hoverIntent", ".child", function(){}); nie wydaje się być właściwą drogą do tego.

Jakie jest prawidłowe podejście do stosowania wtyczki do elementów załadowanych po początkowym $(document).ready()?

+5

Najprostszy rzeczą do zrobienia jest jawne zastosowanie wtyczki w obsłudze "sukcesu" wywołań ajaxowych. – Pointy

+0

Wtyczka prawdopodobnie używa '$ (you_passed_selector) .hover()' jako haka, możesz po prostu zmienić wtyczkę, aby użyć '$ (document) .on ('hover', you_passed_selector, function() {});'. Lub jak wcześniej podany najprostszy sposób wiązania nowych elementów po dodaniu. – Chad

Odpowiedz

11

jquery .on działa poprzez monitorowanie zdarzeń na obiekcie nadrzędnym, a następnie wywoływanie procedury obsługi, jeśli zdarzenie pochodzi z dopasowanego selektora podrzędnego. W twoim przypadku zdarzenie, które chcesz monitorować, jest jednak takie, że element został zmieniony w celu wyświetlenia zdarzenia onchange tylko dla elementów wejściowych (ponieważ mogą one zostać zmienione przez użytkownika).

Jeśli jakikolwiek inny element ulega zmianie, musi to być spowodowane javascript, dlatego możesz wywoływać funkcje po utworzeniu nowej treści.

$(".child", parentElementContext).hoverIntent(makeTall, makeShort) 

Są 2 praktyczne rozwiązania

1) Co ja zwykle zrobić, to stworzyć metodę init zaczyna kontekst (takie jak dokument).

MyPage.init = function(context) { 
    $('.selector', context).hoverIntent(); 
    $('.other', context).dialog(); // any other plugins 
}; 

Potem ręcznie wywołać init, gdy zaktualizować DOM (bo nie zawsze trzeba zadzwonić init, gdy zaktualizować DOM)

$.ajax({ 
    url: url, 
    data: data, 
    success: function(data){ 
    var context = $('.parent'); 
    context.html(data); 
    MyPage.init(context); //calls hoverIntent and other plugins 
    } 
}); 

2) Jeśli naprawdę trzeba monitorować wszystko, ty można używać tej wtyczki http://james.padolsey.com/javascript/monitoring-dom-properties/

a następnie $('.parent').on('valuechange', function() { /* init plugins*/}

+0

Dla każdego: podczas wywoływania 'MyPage.init (context);' w ten sposób, byłoby właściwe powiedzieć, że '$ ('. Selektor', kontekst) .hoverIntent(); $ (" .inus ", kontekst) .dialog(); // wszystkie inne wtyczki są wywoływane, nawet jeśli potrzebuję tylko 'hoverIntent' na tej stronie, a nie' dialog'? Jeśli tak, czy nie byłoby to rażąco nieefektywne? –

1

można użyć żywo dołączyć zdarzenie do elementu, który będzie b e w DOM teraz lub w przyszłości.

$(".parent .child").live("mouseover", function(){ 
    //Do fun stuff here 
}).live("mouseout", function(){ 
    //Undo fun stuff here 
}); 

więc plugin mógłby wyglądać następująco

$.fn.hoverIntent = function(mouseover, mouseout) { 
    this.live("mouseover", mouseover).live("mouseout", mouseout); 
    return this; 
}; 

można nazwać ten plugin

$(".parent .child").hoverIntent(makeTall, makeShort).load("other_page.php"); 
+3

'$ (". Parent .child "). Live (...)' jest takie samo jak '$ (" parent "). On (" mouseenter "," .child ", ...)' i ' on 'to nowy sposób na zrobienie tego. –

Powiązane problemy