jquery .hover nie działa na elementach renderowanych AJAX

Question

Mam niektóre elementy, które są tworzone z połączenia AJAX. Wewnątrz tych elementów znajduje się element potomny, który po ukryciu musi pokazywać inny element podrzędny, który został dynamicznie utworzony. Po uruchomieniu jquery .hover w skrzypcach, działa dobrze. Kiedy zaimplementuję go w moim kodzie, nie chce działać.

Zastanawiam się, czy to zależy od tego, kiedy skrypt .hover jest ładowany, a kiedy elementy są ładowane z AJAX. Czy trzeba iść przed innym? Czy należy wprowadzić .promise, aby czekać na załadowanie elementów AJAX przed uruchomieniem skryptu .hover?

Oto fiddle z mojego przykładu.

Answer 1

Rozumiem, że twoje pytanie oznacza, że ​​dołączasz wydarzenie do elementu, który może jeszcze nie istnieć. Zamiast wiązania się z elementem (który jest skróconą wersją), powinieneś przekazać go do stałego elementu kontenera. Możesz to zrobić z delegate() lub .on() w zależności od wersji jQuery.

Oto, co to będzie wyglądać w skrzypcach: http://jsfiddle.net/7dcuh/15/

Answer 2

Musisz wykonać skrypt .hover w powodzeniu wywołania AJAX po wstawieniu elementów.

Answer 3

Jeśli zawartość jest generowana z Ajax, należy użyć livequery

Answer 4

generowanych dynamicznie elementów, imprezy powinny być przekazywane z jednego statycznego rodziców elementu lub obiektu dokumentu, można użyć on lub delegate metody.

$(document).on({ 
    mouseenter: function() { 
     $(this).next('.show').fadeIn(800); 
    }, 
    mouseleave: function() { 
     $(this).next('.show').delay(800).fadeOut(800); 
    } 
}, '.touch'); 

Answer 5

To może nie być prawidłowa odpowiedź, ale znalazłem elementy, które są tworzone wewnątrz funkcji. Potrzebujesz ich selektora do zadeklarowania w ramach funkcji. Tak:

function createEle(){ 
    $('#element').after('<div id="newEle"><div id="inner" style="display:none;"></div></div>'); 
    $('#newEle').hover(function(){ 
     $('#inner','#newEle').show(); 
    },function(){ 
     $('#inner','#newEle').hide(); 
    }); 
} 

Answer 6

Wyjazd odroczonego zdarzeń za pomocą funkcji .on(). Można zrobić imprezę w stylu:

$('#parent').on('hover', '.touch', function() { 
    $(this).next('.show').fadeIn(800); 
}, 
function(){ 
    $(this).next('.show').delay(800).fadeOut(800); 
}); 

OR, czystym CSS rozwiązaniem byłoby:

.touch + .show { 
    display:none; 
} 
.touch:hover + .show { 
    display:block; 
} 

Answer 7

należy starać się wstawić skrypt wewnątrz ajax odpowiedzi. jak

<script> </script> 

albo służysz skrypt gdy wywołanie ajax jest kompletna lub sukces

jQuery.ajax({ 

success:function(){jQuery('selector').yourfunction();}, 

     }); 

jeśli nie, skrypt będzie działał i nie znaleźć selektorów w DOM i skrypt przyzwyczajenie uruchomić ponownie