バインドスクロールイベントから動的DIV？

Question

たとえば、AJAXを使用した後、私はスクロール可能なDIVを持っています。スクロールイベントをバインドするにはどうすればいいですか？

私が試してみた：

$(window).on("scroll", ".mydiv", function(){...}) 
$(document).on("scroll", ".mydiv", function(){...}) 
$(".mydiv").on("scroll", function(){...}) 
$(".mydiv").scroll(function(){...}) 

をしかし、彼らは動作しませんでした。あなたがjquey.onを使用する前にする必要があり

DEMO

Answer 1

要素が文書内に存在しています（）。

あなたはjquery.on（）

$('body').append('<div class="mydiv" style="display:none"></div>'); 
$(document).on("scroll", ".mydiv", function(){...}) 

Answer 2

が、これはあなたのコードから変更してみてください

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

・ホープ、このヘルプを使用する前に、ダミー<div class="mydiv"></div>を挿入することができます

Answer 3

http://jsfiddle.net/hainawa/cruut/

$(document).ready(function(){ 
    var $mydiv = $('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 

    // It will work 
    $mydiv.scroll(function(){ 
     alert("A"); 
    }); 

    // Trigger 
    $("#btn").click(function(){ 
     //You are using the method append,so you don't need judge if div.mydiv exits. 
     //You'll need do this if you're using display:none 
     $("body").append($mydiv); 
    }); 
}); 

Answer 4

あなたがオーバーフローを使用してのdivのための高さを指定する必要がautoに等しい：

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

Answer 5

私は同じ問題を抱えていると私はjQuery .on() APIで、次を見つけた：

すべてのブラウザで、要素上の読み込み、スクロール、エラーイベントはバブル処理されません。 Internet Explorer 8以前では、ペーストイベントとリセットイベントはバブル処理されません。このようなイベントは、委譲での使用はサポートされていませんが、イベントハンドラがイベントを生成する要素に直接接続されている場合に使用できます。

残念ながら、これは可能ではないようです。

Answer 6

私は良い答えを見つけられなかったので、この古い質問を復活させています。私は動的に追加された要素の 'scroll'イベントを聞くためのより良い方法のために自分自身を苦労しました。

このため、スクロールイベントはDOM内でバブルアップしないため、スクロールに使用するようにon（）を使用することはできません。だから私は私自身のカスタムトリガイベントを聞いて来た私は 'スクロール'イベントを聴きたいと思う要素で。

スクロールイベントは、要素がDOMに追加された後、自分自身のカスタムイベントがトリガーされた後にバインドされます。

$("body").on("custom-scroll", ".myDiv", function(){ 
 
    console.log("Scrolled :P"); 
 
}) 
 

 
$("#btn").on("click", function(){ 
 
    $("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
 
    listenForScrollEvent($(".myDiv")); 
 
}); 
 

 

 
function listenForScrollEvent(el){ 
 
    el.on("scroll", function(){ 
 
     el.trigger("custom-scroll"); 
 
    }) 
 
}

body{ font-family: tahoma; font-size: 12px; } 
 
\t 
 
\t .myDiv{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }

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

Answer 7

それは例のベローズを確認し、直接onを取り付けることにより作業です。

これが役に立ちます。私のアプリで

$("body").append('<div class="myDiv"><br><br><p>Content1<p><br><br><p>Content2<p><br><br></div>'); 
 

 
$(".myDiv").on("scroll", function(){ 
 
    \t console.log("scrolling"); 
 
}); \t

\t body{ font-family: tahoma; font-size: 12px; } 
 
\t 
 
\t .myDiv{ 
 
\t \t height: 90px; 
 
\t \t width: 300px; 
 
\t \t border: 1px solid; 
 
\t \t background-color: lavender; 
 
\t \t overflow: auto; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 8

、私は身体にボタンがクリックされるたびに、フォームのフィールドセットを追加し、ボタンを持っている - 私は新しい要素にページをスクロールダウンしたかったが、のdidnこと明らかな理由（バブリングなど）のために働きません。私は

function scroll(pixels){ 
    $('html, body').animate({ 
     scrollTop: pixels 
    }, 1000); 
}; 

function addObservation(x){ 
    $('body').append(x); 
    newFieldSet = $('fieldset').last(); 
    pixelsFromTop = newFieldSet.offset().top; 
    scroll(pixelsFromTop); 
}; 

$(document).on("click", "#add_observation", function(){ 
    addObservation("<fieldset>SOME FORM FIELDS HERE</fieldset>"); 
}); 

だからあなたがフィールドセットを追加するたびに、jQueryのは最後の1は、その後、フィールドセットは上からどのように多くのピクセル .offset().top対策を追加見つけ、ウィンドウをスクロールし...簡単な修正を思い付いたこと距離。