0

我有一段简单的代码，我正在努力弄清楚为什么我的滚动事件没有被绑定。这是一个 codepen 链接，我也会在这里发布代码：

HTML：

<div class="aaa"></div>

CSS：

div.xxx
{
    height:100px;
    overflow:scroll;
    width:100px;
}

Javascript（包括jQuery）：

$("*").on("scroll", function (event)
{
    alert("scrolled!");
    console.log("scroll");
});

$(document).ready(function() 
{
    $(".aaa").html('<div class="xxx">this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/></div>');     
});

我想要做的是触发任何滚动事件（嗯，特别是 div.xxx 中的滚动）但是如果我让它动态加载代码，它就不起作用。

PS我也尝试过使用live，但显然它已经过时并且甚至不支持live。所以我别无选择。

PS我更新了我的codepen示例以显示该click事件有效，而即使它们以相同的方式编写，滚动一个也不会。

4

2 回答 2

2

您的代码的问题是您在应用程序开始时分配了侦听器，并且侦听器分配运行一次，并分配给他们找到的每个元素，仅此而已。

只有在这个阶段之后，你才真正添加你的 div，那是不被听的。

解决方案是在添加新内容后添加侦听器。

为此，您应该使用类似于以下 javascript 的内容

// declare a listener method, don't assign it yet to any element
var scrolled = function (event) {
  // just a nicer way of notification (instead of alert)
  var s = $('.scroll');
  s.fadeIn(500, function(){
    s.fadeOut(200);
  });
};

$(document).ready(function() {   
    // element used to notify the user of scroll
    $('body').append('<div class="scroll" style="display: none">scrolled</div>');
    $(".aaa").html('<div class="xxx">this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/>this<br/></div>')
             .children('.xxx') // select the newly added container
             .on("scroll", scrolled); // add the method above as a scroll listener
});

这样，您每次添加新内容时都会添加滚动侦听器。所以新的 div 将被收听。

工作示例

于 2013-04-14T12:05:07.497 回答
0

改变：

div.xxx
{
    height:100px;
    overflow:scroll;
    width:100px;
}

至：

div.aaa
{
    height:100px;
    overflow:scroll;
    width:100px;
}

没有带类的 divxxx

更新的演示

于 2013-04-14T12:04:50.263 回答