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