3

我正在使用 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/

4

3 回答 3

3

好吧，实际上是事件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()
});

演示在这里

于 2013-08-18T09:04:54.550 回答
0

“在所有浏览器中，加载、滚动和错误事件（例如，在元素上）不会冒泡。在 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/

这不适用于多个附加！

于 2013-08-18T08:55:05.917 回答
0

将 on() 函数放在 append 之后。

$("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() 时，它们必须存在于页面上

于 2013-08-18T09:05:20.187 回答