Question

我想在动态添加的元素中检测到JQuery的滚动。鉴于.on()方法检测到click等事件，scroll事件似乎无法被识别。

HTML：

<input type="button" id="add" value="add Divs"/>
<div id="container"></div>
Click: <div id="out"></div><br>
Scroll: <div id="out2"></div>

使用Javascript：

$("#add").on("click",function(){
    var div = document.createElement("div");
    div.className="childDiv";
    div.innerHTML=" TEST  TEST  TEST  TEST  TEST  TEST  TEST  TEST  TEST  TEST  TEST ";
    $('#container').append(div);
})

$("#container").on("click",".childDiv",function (){
    $("#out").html("click detected");
    setTimeout(function(){$("#out").html("")},300)
});

$("#container").on("scroll",".childDiv",function (){
    $("#out2").html("scroll detected");
    setTimeout(function(){$("#out2").html("")},300)
});

CSS：

.container, .childDiv {
    display:inline-block;
    margin: 10px;
    background: lightgray;
    height: 100px;
    width: 80px;   
    overflow:auto;
}

Answer 1

滚动事件不会冒泡，因此您无法委派它。但是，您可以在支持它的所有浏览器上捕获事件：

document.getElementById('container').addEventListener(
    'scroll',
    function(event){
        var $elm = $(event.target);
        if( $elm.hasClass('childDiv')){ // or any other filtering condition
           $("#out2").html("scroll detected");setTimeout(function(){$("#out2").html("")},300);
        }
    },
    true // Capture event
);

JQuery - 倾听＆＃34;滚动＆＃34;动态添加/附加元素中的事件

1 个答案:

-jsFiddle-