2

我在 Stackoverflow 上找到了这个脚本：

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

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

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

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

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

有什么方法可以在页面加载时执行脚本并使其影响页面加载后页面上的内容和以后动态加载的内容？

谢谢你的时间。

4

2 回答 2

1

使用onjQuery 函数。

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

JSFIDDLE

在文档中，我们发现：

.on（事件 [，选择器] [，数据]，处理程序（事件对象））

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

  • events： “点击”
  • selector： “。我最喜欢的课程”

直接和委托事件

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

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on(). 为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。

[在文档页面上阅读更多内容]

这个小提琴中的问题是您创建绑定到每个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
});

更新了 FIDDLE

于 2013-07-02T14:34:03.993 回答
0

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

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

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

你JS看起来像这样

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

其中event等于click,mousedown等。

于 2013-07-02T14:30:34.910 回答