web-dev-qa-db-ja.com

Jquery .on（ 'scroll'）がスクロール中にイベントを発生させない

ulのスクロール中にスクロールイベントが発生していません。 jQueryバージョン1.10.2を使用しています。 ajaxページからulを読み込んでいるので、$('ulId').on('scroll', function() {});やその他のライブメソッドを使用できませんでした。解決策を見つけるのを手伝ってください。

$(document).on( 'scroll', '#ulId', function(){
    console.log('Event Fired');
});
jqueryeventsscroll
60
ABHILASH SB

IDセレクターのIDの前に#を指定するのを忘れた可能性があります。idname__の前に#を指定する必要があります。つまり、ulIdname__です。

おそらく、ulとscrollsを含むdivでscrollイベントをバインドする必要があります。 ulname__ではなくdivでイベントをバインドする必要があります

$(document).on( 'scroll', '#idOfDivThatContainsULandScroll', function(){
    console.log('Event Fired');
});

編集

スクロールイベントはイベントの委任に使用されるDOMでバブルしないため、上記は機能しません。この質問を参照してください なぜスクロールの作業を委任しないのですか？

しかし、最新のブラウザー> IE 8では、他の方法で実行できます。 jqueryを使用して委任する代わりに、Javaスクリプトdocument.addEventListenerでイベントキャプチャを使用して委任できます。この tuturial でのバブリングとキャプチャの動作を確認してください。

ライブデモ

document.addEventListener('scroll', function (event) {
    if (event.target.id === 'idOfUl') { // or any other filtering condition        
        console.log('scrolling', event.target);
    }
}, true /*Capture event*/);

イベントの委任が不要な場合は、documentname__を介して委任する代わりに、スクロールイベントをulに直接バインドできます。

ライブデモ

$("#idOfUl").on( 'scroll', function(){
   console.log('Event Fired');
});
57
Adil

Ajaxを使用してulが読み込まれた後にスクロールイベントをバインドすることで問題が解決しました。私の調査結果では、$（document）.on（ 'scroll'、 '#id'、function（）{...}）は機能せず、ajaxロードが機能していることが判明した後、スクロールイベントをバインドします。

$("#ulId").bind('scroll', function() {
   console.log('Event worked');
});

Ulを削除または置換した後、イベントのバインドを解除できます。

それが誰かを助けることを願っています。

23
ABHILASH SB

VueJSを使用して、この質問のすべての方法を試しましたが、どれも機能しませんでした。誰かが同じように苦労している場合：

mounted() {
  $(document).ready(function() { //<<====== wont work without this
      $(window).scroll(function() {
          console.log('logging');
      });
  });
},
10
juliangonzalez

別のオプションは次のとおりです。

$("#ulId").scroll(function () { console.log("Event Fired"); })

参照： ここ

4
MatayoshiMariano
$("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");
    })
}

この投稿を参照してください- スクロールイベントをダイナミックDIVにバインドしますか？

2
vipin8169

Ajaxの読み込み前にドキュメントに#ulIdを配置（css表示：なし;）するか、それを含むdivにラップ（css表示：なし;）してから、ajaxページの読み込み中に内側のhtmlを読み込むだけで、そうすれば、スクロールイベントはajaxの前にすでに存在するdivにリンクされますか？

次に使用できます：

$('#ulId').on('scroll',function(){ console.log('Event Fired'); })

ulIdをスクロール可能なdivの実際のIDに置き換えます。

次に、css display：blockを設定します。ロード時に#ulId（またはdivを含む）で？

0
IIIOXIII

私はこれがかなり古いことを知っていますが、そのような問題を解決しました：親要素と子要素がスクロール可能でした。

   if ($('#parent > *').length == 0 ){
        var wait = setInterval(function() {
            if($('#parent > *').length != 0 ) {
                $('#parent .child').bind('scroll',function() {
                  //do staff
                });
                clearInterval(wait);
            },1000);
        }

私が抱えていた問題は、子供がいつDOMにロードされたかわからなかったが、毎秒それをチェックし続けていたことです。

注：これは、ドキュメントの読み込み直後ではなく、すぐに発生する場合に役立ちます。そうでない場合、クライアントの計算能力を理由なく使用します。

0
Riiwo