append 项目后的滚动事件不起作用

Question

Trying to call scroll event after append item but it is not working. what I do wrong? Please help me Thank you.

you can check the code here https://jsfiddle.net/4uk92cxe/1/

 $(document).ready(function () { $('#myDiv2').append( "<table class='scroll-item'><tr><td> YYYYYYYYYYYYYY</td></tr></table>" ); $('.scroll-item').on('scroll', function () { console.log('scrolling'); }); $(document).on('scroll', "table[class='scroll-item']", function () { console.log('scrolling'); }); $('.scroll-item').scroll(function () { console.log('scrolling'); }); $(document).on('scroll', '.scroll-item', function () { console.log('scrolling'); }); });

 .wrapper { width:100px; overflow-x: scroll; overflow-y: hidden; } table { width: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="wrapper"> <table class="scroll-item"> <tr> <td> XXXXXXXXXXXXXXXXXX</td> </tr> </table> </div> <div id="myDiv2" class="wrapper"></div>

Answer 1

Try change the class scroll-item in the table. Rmove it from table, and put it in the div content .wrapper that is holding the scrollbar. Example

 $(document).ready(function () { $("#myDiv2").addClass("scroll-item"); $('#myDiv2').append( "<table ><tr><td> YYYYYYYYYYYYYY</td></tr></table>" ); $('.scroll-item').on('scroll', function () { console.log('scrolling'); }); });

 .wrapper { width: 100px; overflow-x: scroll; overflow-y: hidden; } table { width: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="scroll-item wrapper"> <table> <tr> <td> XXXXXXXXXXXXXXXXXX</td> </tr> </table> </div> <div id="myDiv2" class="wrapper"></div>

Just add the class in the div: $("#myDiv2").addClass("scroll-item"); and also, replace this class here <div class="scroll-item wrapper"> .

You can also remove this: $("#myDiv2").addClass("scroll-item"); and add the class directly in the HTML to avoid more work with Jquery.

Answer 2

The answer to your question what I do wrong? is, you are calling on scroll on .scroll-item but the scroller is in the .wrapper .

use this instead,

$('.wrapper').on('scroll', function(){
  console.log('scrolling');
});