jQueryの.on（）スクロールは、動的divの

Question

に機能していない私は、私はこの仕事を得ることができない、まだSO上やウェブの他の部分で見つかったとしているほぼすべての他の「ソリューション」を試してみました。ユーザーが特定のリンクをクリックしたときに、私はposition: fixed; overflow-y: autoで動的に作成div要素を持っている

は、div要素が作成されます。これは、動的に作成されたdivがスクロールされるたびに、いくつかのコードを試して実行するために使用する関数です。

 $("#scroller").on("scroll",function() { 
      console.log("scrolled.."); 
     }); 

#scrollerは、動的に作成divのIDです。

事があるページがロードされたときに、この機能はを動作しませんが、機能は、Google Chromeのデベロッパーコンソールにペーストされたときには、は仕事を行います。

$("#scroller-container").on("scroll","#scroller",function() { 
     console.log("scrolled.."); 
    }); 

をしかし、それはまだ動作しません：

私は定期的にscroll()機能を使用してから次へon()機能を変更することにすべてを試してみました。

これを動作させるにはどうすればよいですか？

EDIT：すべてのコードがjQuery(window).load(function()...関数内で

Answer 1

要素がDOMに追加された後、このように、結合スクロールイベントをお試しください：

$("body").on("DIVscroll", "#scroller", function(){ 
 
    console.log("Scrolled..."); 
 
}); 
 

 
$("#btn").on("click", function(){ 
 
    $("body").append('<div id="scroller">I have a dynamically created div with position: fixed; overflow-y: auto, the div is created when a user clicks a certain link. This is the function Im using to try and execute some code whenever that dynamically created div is scrolled.</div>'); 
 
    ScrollEventListener($("#scroller")); 
 
}); 
 

 
function ScrollEventListener(el){ 
 
    el.on("scroll", function(){ 
 
    el.trigger("DIVscroll"); 
 
    }); 
 
}

body{ 
 
    font-size: 17px; 
 
} 
 
\t 
 
#scroller{ 
 
    height: 100px; 
 
    width: 300px; 
 
    border: 1px solid; 
 
    overflow-y: auto; 
 
    position: fixed; 
 
}

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