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

Question

试图在 append 项目之后调用滚动事件，但它不起作用。 我做错了什么？ 请帮帮我谢谢。

你可以在这里查看代码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

尝试更改表中的 class 滚动项。 从表格中移除它，并将其放入包含滚动条的 div 内容.wrapper中。 例子

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

只需在 div 中添加 class ： $("#myDiv2").addClass("scroll-item"); 并且，在此处替换此 class <div class="scroll-item wrapper"> 。

您也可以删除它： $("#myDiv2").addClass("scroll-item"); 并直接在 HTML 中添加 class 以避免与 Jquery 进行更多工作。

Answer 2

你的问题的答案我做错了什么？ 是，您正在调用.scroll-item上的滚动，但滚动条位于.wrapper中。

改用这个，

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