web-dev-qa-db-ja.com

body on（）バインディングでdivにスクロールイベントをアタッチすると失敗する

スクロールイベントで問題が発生しています。

イベントを特定のdivにアタッチ/バインドしようとしています。ソートするときにコンテンツがリロードされるため、バインディングが失われるため、$('body').on()を使用しています。

これは機能せず、イベントは発生しません：

$('body').on('scroll', 'div.dxgvHSDC + div', function () {
}

一方、これは機能します：

$('body').on('mousewheel DOMMouseScroll', 'div.dxgvHSDC + div', function () {
}

そしてこれも：

$('div.dxgvHSDC + div').on('scroll', function () {
}

どうしたの？

javascriptjqueryeventsbindingscroll
13
Jompis

scrollイベントに委任を追加することはできません。このイベントはDOMをバブルアップしないため、任意の要素に委任することはできません。あなたはより多くの情報を見つけることができます ここ ：

スクロールイベントが発生しません。

イベントはバブルしませんが、ユーザーがページ全体をスクロールすると、ブラウザーはドキュメントとウィンドウの両方でスクロールイベントを発生させます。

スクロール要素を作成するイベント内にイベントハンドラーを作成する必要があります。

生きている例： http://jsfiddle.net/Um5ZT/1/

$('#link').click(function(){

    //dynamically created element
    $('body').append('<div class="demo"></div>');

    //dynamically added event
    $('.demo').on('scroll', function () {
        alert('scrolling');
    });

});
30
Alvaro

最新のブラウザ（IE> 8）では、scrollイベントをキャプチャして、動的要素のdocumentレベルにすることができます。 jQueryはキャプチャ段階を実装していないため、javascript addEventListener()メソッドを使用する必要があります。

document.addEventListener(
    'scroll',
    function(event){
        var $Elm = $(event.target);
        if( $Elm.is('div.dxgvHSDC + div')){ // or any other filtering condition
            // do some stuff
            console.log('scrolling');
        }
    },
    true // Capture event
);
13
A. Wolff