9

たとえば、AJAX を使用すると、スクロール可能な DIV ができます。スクロールイベントをそれにバインドする方法は?

私はもう試した：

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

しかし、それらはうまくいきませんでした。

デモ

4

9 に答える 9

2

私は同じ問題を抱えており、jQuery .on() APIで次のことを見つけました。

すべてのブラウザーで、ロード、スクロール、およびエラー イベント (要素など) はバブルしません。Internet Explorer 8 以前では、貼り付けイベントとリセット イベントはバブリングしません。このようなイベントは委任での使用はサポートされていませんが、イベント ハンドラーがイベントを生成する要素に直接アタッチされている場合は使用できます。

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

于 2015-02-28T01:48:37.947 に答える
1

これをコードから変更してみてください

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

この助けを願っています

于 2013-05-13T10:07:28.357 に答える
0

直接貼り付けての作業です。以下のon例を確認してください。

お役に立てれば。

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

$(".myDiv").on("scroll", function(){
  	 console.log("scrolling");
});	
	body{ font-family: tahoma; font-size: 12px; }
	
	.myDiv{
		height: 90px;
		width: 300px;
		border: 1px solid;
		background-color: lavender;
		overflow: auto;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

于 2015-12-17T15:41:56.570 に答える
0

私のアプリには、ボタンがクリックされるたびにフォームフィールドセットを本文に追加するボタンがあります。ページを新しい要素までスクロールしたかったのですが、明らかな理由 (バブリングなど) で機能しませんでした。私は簡単な修正を思いつきました...

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 は最後に追加されたものを見つけ、.offset().topフィールドセットが上から何ピクセル離れているかを測定し、その距離だけウィンドウをスクロールします。

于 2016-08-09T19:29:48.837 に答える
0

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);
    });
});
于 2013-05-13T10:26:00.560 に答える
-1

オーバーフローが auto に等しい div の高さを指定する必要があります。

    .myDiv{
    height: 90px;
    overflow: auto;
}
于 2014-04-25T14:20:19.640 に答える
-3

jquey.on() を使用する前に、要素がドキュメントに存在している必要があります。

<div class="mydiv"></div>jquery.on() を使用する前にダミーを挿入できます

$('body').append('<div class="mydiv" style="display:none"></div>');
$(document).on("scroll", ".mydiv", function(){...})
于 2013-05-12T08:04:45.263 に答える