Bind scroll Event to Dynamic DIV?

Question

Na przykład, po użyciu AJAX, będę mieć przewijany DIV. Jak powiązać z nim zdarzenia przewijania?

Próbowałem:

$(window).on("scroll", ".mydiv", function(){...}) 
$(document).on("scroll", ".mydiv", function(){...}) 
$(".mydiv").on("scroll", function(){...}) 
$(".mydiv").scroll(function(){...}) 

Ale nie działa. w dokumencie istnieje

DEMO

Answer 1

element musi być przed użyciem jquey.on().

można wstawić obojętne <div class="mydiv"></div> przed użyciem jquery.on()

$('body').append('<div class="mydiv" style="display:none"></div>'); 
$(document).on("scroll", ".mydiv", function(){...}) 

Answer 2

spróbować tej modyfikowany kodzie

http://jsfiddle.net/apDBE/

$(document).ready(function(){ 

    // Trigger 
    $("#btn").click(function(){ 
     if ($(".myDiv").length == 0) // Append once 
     $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
    }); 

    // Not working 
    $(".myDiv").scroll(function(){ 
     alert("A"); 
    }); 

    // Not working 
    $(document).on("scroll", ".myDiv", function(){ 
     alert("A"); 
    }); 
}); 

nadzieję, że to pomaga

Answer 3

http://jsfiddle.net/hainawa/cruut/

$(document).ready(function(){ 
    var $mydiv = $('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 

    // It will work 
    $mydiv.scroll(function(){ 
     alert("A"); 
    }); 

    // Trigger 
    $("#btn").click(function(){ 
     //You are using the method append,so you don't need judge if div.mydiv exits. 
     //You'll need do this if you're using display:none 
     $("body").append($mydiv); 
    }); 
}); 

Answer 4

należy określić wysokość dla div z przelewem równa Auto:

.myDiv{ 
    height: 90px; 
    overflow: auto; 
} 

Answer 5

Mam ten sam problem i znalazłem następujący w jQuery .on() API:

We wszystkich przeglądarkach, ładowanie, przewijanie i błędy (np. Na elemencie) nie powodują bańki. W przeglądarce Internet Explorer 8 i niższych zdarzenia wklejania i resetowania nie są wyświetlane. Takie zdarzenia nie są obsługiwane do użytku z delegacją, ale mogą być używane, gdy procedura obsługi zdarzeń jest bezpośrednio dołączona do elementu generującego zdarzenie.

Niestety nie wydaje się to możliwe.

Answer 6

Właśnie ożywam to stare pytanie, ponieważ nie znalazłem dobrej odpowiedzi i walczyłem o lepszy sposób słuchania zdarzenia "przewijania" dla dynamicznie dołączanego elementu.

Ponieważ zdarzenie przewijania nie powoduje baniek w DOM, z tego powodu nie możemy użyć on(), jak używamy do przewijania. Tak więc wymyśliłem słuchanie mojego własnego zdarzenia wyzwalanego przez użytkownika w elemencie, w którym chciałbym słuchać zdarzenia "przewijania".

Zdarzenie przewijania jest wiązane po dodaniu elementu do DOM, po którym następuje wywołanie mojego niestandardowego zdarzenia.

$("body").on("custom-scroll", ".myDiv", function(){ 
 
    console.log("Scrolled :P"); 
 
}) 
 

 
$("#btn").on("click", function(){ 
 
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
 
    listenForScrollEvent($(".myDiv")); 
 
}); 
 

 

 
function listenForScrollEvent(el){ 
 
    el.on("scroll", function(){ 
 
     el.trigger("custom-scroll"); 
 
    }) 
 
}

body{ font-family: tahoma; font-size: 12px; } 
 
\t 
 
\t .myDiv{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="button" id="btn" value="Click"/>

Answer 7

To praca przez dołączenie on bezpośrednio sprawdzić przykład poniżej.

Mam nadzieję, że to pomoże.

$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
 

 
$(".myDiv").on("scroll", function(){ 
 
    \t console.log("scrolling"); 
 
}); \t

\t body{ font-family: tahoma; font-size: 12px; } 
 
\t 
 
\t .myDiv{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 8

W moim app, mam przycisk, który dołącza fieldsets formularza do ciała za każdym razem, gdy przycisk zostanie kliknięty - Chciałem, aby przewinąć stronę w dół do nowego elementu, ale to didn działa z oczywistych powodów (bulgotanie itp.). Wymyśliłem prosty fix ...

function scroll(pixels){ 
    $('html, body').animate({ 
     scrollTop: pixels 
    }, 1000); 
}; 

function addObservation(x){ 
    $('body').append(x); 
    newFieldSet = $('fieldset').last(); 
    pixelsFromTop = newFieldSet.offset().top; 
    scroll(pixelsFromTop); 
}; 

$(document).on("click", "#add_observation", function(){ 
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>"); 
}); 

Więc za każdym razem dodać zestaw pól, jQuery znajdzie ostatni dodany, a następnie .offset().top środki ile pikseli fieldset jest od góry, a następnie przewija okno dystans.