Question

我正在使用Jquery 1.9.1。当有人在类“myclass”中滚动div时，此代码用于捕获滚动事件。

$('.myclass').on('scroll', function() {
alert('test');
});

这适用于页面加载中已有的元素。但是当我使用.append创建一个新元素时：

$("body").append("<div class='myclass'> some large text to show the scrollbar ....</div>');

此新元素不会触发任何滚动事件。如何解决这个问题？

更新了JsFiddle：http://jsfiddle.net/R6UH7/2/

Answer 1

实际上，事件load，error和scroll实际上并未冒出DOM。所以你需要另一种方法。我能想到的最好的是再次添加听众......就像这样：

function scrollfunc() {
    alert('test');
};

function listen_again() {
    var all = document.querySelectorAll(".myclass");
    for (i = 0; i < all.length; i++) {
        all[i].onscroll = scrollfunc;
    }
}

function apdDiv() {
    $("body").append('<div class="myclass" >This is another div that using append<br>This is another div that using append</div>');
    listen_again()
}

$(document).ready(function () {
    apdDiv();
    listen_again()
});

演示 here

Answer 2

“在所有浏览器中，加载，滚动和错误事件（例如，在元素上）不会冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。此类事件不支持使用使用委托，但是当事件处理程序直接附加到生成事件的元素时，可以使用它们。“

不确切地知道它们与直接连接的含义是什么，但我首先想到的是，你不能只将那些已经存在的动态数据滚动。

感谢@Sergio

function apdDiv() {
    $("body").append('<div class="myclass" >This is another div that using append<br>This is another div that using append</div>');
    $('.myclass').scroll(function () {
        alert('test');
    });
}
$(document).ready(function () {
    apdDiv();
});

http://jsfiddle.net/VGVZJ/1/

这不适用于多个附加内容！

Answer 3

在追加后放上on（）函数。

$("body").append('<div class="myclass" >This is another div that using append<br>This is another div that using append</div>');
$('.myclass').on('scroll', function() {
alert('test');
});

http://jsfiddle.net/R6UH7/5/

选择“myclass”元素只会发生一次。如果在创建新事件之前选择，则无法将此事件绑定到将来的div。

来自 on（）文档：

事件处理程序仅绑定到当前选定的元素;在您的代码调用.on（）
时，它们必须存在于页面上

Jquery On Scroll不使用创建的新元素

3 个答案:

演示 here