Bind scroll Event To Dynamic DIV?

Question

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

I\'ve tried:

$(window).on(\"scroll\", \".mydiv\", functi         


        

Answer 1

you should specify a height for your div with overflow equals to auto :

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

Answer 2

try this modified 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 this help

Answer 3

It's work by attaching on directly, check example bellow.

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>