Associate event scrolling with dynamic DIV?

Question

For example, after using AJAX, I will have a scrollable DIV. How to bind scroll events to it?

I tried:

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

But they did not work.

Demo

Answer 1

I simply resurrect this old question because I did not find a good answer, and I tried my best to listen to the "scroll" for the dynamically added item.

Since the Scroll event does not fade out in the DOM, because of this, we cannot use on (), as we use to scroll. So I came up with listening to my own custom event in an element where I would like to listen to the 'scroll' event.

The scroll event is bound after adding an element to the DOM and then triggering its own custom event.

 $("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; } .myDiv{ height: 90px; width: 300px; border: 1px solid; background-color: lavender; overflow: auto; } 

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

Answer 2

I have the same problem and I found the following in jQuery.on () API :

In all browsers, loading, scrolling, and error events (for example, on an element) do not bubble. In Internet Explorer 8 and below, paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element that generates the event.

So, unfortunately, this is not possible.

Answer 3

try changing this from your code

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

Hope for this help

Answer 4

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 5

It works by attaching on directly, check the example below.

Hope this helps.

 $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); $(".myDiv").on("scroll", function(){ console.log("scrolling"); }); 

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

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

Answer 6

In my application, I have a button that adds field shapes to the body every time the button is clicked. I wanted to scroll to the new item, but this doesn’t work for obvious reasons (bubbles, etc.) ..). I came up with a simple solution ...

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

That way, every time you add a set of fields, jQuery finds the last one added, then .offset().top measures how many pixels the set of fields has on top, and then scrolls the window at which the distance is.

Answer 7

A simple and convenient way to listen to scroll events on dynamically loaded content

 <div class="scrollDiv" onscroll="LoadHistory()> ...Your contents to scroll goes here </div> </script type="text/javascript"> function LoadHistory(){ var pos = $(".scrollDiv").scrollTop(); if (pos == 0) { // your code goes in here } } </script> 

Answer 8

you must specify a height for your div with overflow equal to auto:

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

Answer 9

Element

must exist in the document before using jquey.on ().

you can insert dummy <div class="mydiv"></div> before using jquery.on ()

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