Question

我在Stackoverflow找到了这个脚本：

https://stackoverflow.com/a/7571867/2518302

将该代码置于正常状态时：

 $(document).ready(function () { Script });

..脚本运行良好。问题是它不会影响站点上的动态加载内容，所以如果有一个div加载动态（在页面加载后）脚本不能在该div工作。

然后，如果触发脚本在动态内容加载已经存在的div的同时再次运行，则在页面上使用此脚本第二次获取脚本（脚本在页面加载时执行一次，在动态加载时执行一次））。结果是所有得到脚本的div都以双倍速度滚动。

有没有办法在pageload处执行脚本并使其影响页面加载后的页面内容以及后来的动态加载内容？

谢谢你的时间。

Answer 1

使用on jQuery函数。

$(document).on("event", "selectorOfDynamicElements", function() {
     // do something 
});

JSFIDDLE

在documentation我们发现了这个：

.on（events [，selector] [，data]，handler（eventObject））

因此，在示例中，我们将使用以下参数检测document上的点击次数：

events：“点击”
selector：“。myFavoriteClass”

直接和委派活动

当提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。

事件处理程序仅绑定到当前选定的元素;在您的代码调用 .on()时，它们必须存在于页面上。要确保元素存在且可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。

[详情请见documentation page]

this fiddle中的问题是您创建了对每个mouseover的绑定。

$(document).on('mouseover', '.test', function () {
    // the mouseover is detected, "Hey, create a new handler!"
    $('.test').bind('mousewheel DOMMouseScroll', function(e) {
          // "Ok, sir. Here your code goes"
    });
});

而不是上面的代码，你应该只有：

$(document).on('mouseover mousewheel DOMMouseScroll', '.test', function (e) {
     // here your code goes
});

Updated FIDDLE

Answer 2

使用on并委托给页面加载时出现的元素。

例如，如果页面加载时不存在的动态创建的div看起来像这样

<div id="dynamic"></div>

您的JS看起来像这样

$(body).on(event, '#dynamic', function(){ Script });

event等于click，mousedown等等。

使脚本影响动态加载的内容

2 个答案:

直接和委派活动