Question

我有一段简单的代码，我正在努力弄清楚为什么我的滚动事件没有受到限制。 This是一个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中的滚动）但是如果我这样做，代码是动态加载的，那就不起作用了。

P.S。我也尝试使用直播，但显然它已经过时，甚至不支持直播。所以我没有选择。

P.S。我更新了我的codepen示例，以显示click事件有效，而滚动一则不会以相同的方式编写。

Answer 1

您的代码的问题在于您在应用程序的开头分配侦听器，并且侦听器分配运行一次，并分配给它们找到的每个元素，就是这样。

只有在这个阶段之后你实际上才会添加你的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将被收听。

<强> Working example

Answer 2

变化：

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

为：

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

没有班级xxx

的div

<强> Updated Demo

在jquery中绑定滚动事件的正确方法

2 个答案: