Bind scroll Event To Dynamic DIV?

Question

Ad esempio, dopo aver utilizzato AJAX, avrò un DIV scorrevole. Come associare eventi di scorrimento ad esso?

ho provato:

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

Ma non ha funzionato.

DEMO

Answer 1

elemento deve essere presente nel documento prima di utilizzare jquey.on().

è possibile inserire fittizio <div class="mydiv"></div> prima di utilizzare jquery.on()

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

Answer 2

provare questo modificato dal codice

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"); 
    }); 
}); 

Spero che questo aiuto

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

è necessario specificare l'altezza per il vostro div con troppopieno uguale per l'auto:

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

Answer 5

Sto avendo lo stesso problema e ho trovato quanto segue nella jQuery .on() API:

In tutti i browser, gli eventi di caricamento, scorrimento ed errore (ad esempio, su un elemento) non sono in bolla. In Internet Explorer 8 e versioni precedenti, gli eventi Incolla e Reimposta non vengono visualizzati. Tali eventi non sono supportati per l'uso con la delega, ma possono essere utilizzati quando il gestore eventi è direttamente collegato all'elemento che genera l'evento.

Quindi sfortunatamente questo non sembra possibile.

Answer 6

Sto solo riprendendo questa vecchia domanda perché non ho trovato una buona risposta e mi sono sforzato per un modo migliore di ascoltare l'evento 'scroll' per l'elemento aggiunto in modo dinamico.

Poiché l'evento di scorrimento non è visibile nel DOM a causa di questo non è possibile utilizzare on() come si usa per scorrere. Così mi è venuto in mente il ascoltando il mio evento innescato personalizzato nell'elemento in cui vorrei ascoltare l'evento 'scroll'.

L'evento di scorrimento viene associato dopo l'aggiunta dell'elemento sul DOM seguito dall'attivazione del mio evento personalizzato.

$("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

È lavoro collegando direttamente on, controllare esempio soffietto.

Spero che questo aiuti.

$("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

Nella mia app, ho un pulsante che aggiunge fieldsets forma al corpo ogni volta che un tasto è scattato - ho voluto scorrere la pagina verso il basso per il nuovo elemento, ma che didn Lavorare per ovvi motivi (gorgoglio, ecc.). Mi si avvicinò con una semplice correzione ...

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>"); 
}); 

Così, ogni volta che si aggiunge un fieldset, jQuery trova l'ultimo inserito, quindi .offset().top misure quanti pixel fieldset è dall'alto e poi Scorre la finestra distanza.