下拉页面 Ajax 动态生成的内容，现有 JS 无法应用于新增的元素。需要绑定什么事件来再次运行 JS？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3823 days ago, the information mentioned may be changed or developed.

目前网页是通过鼠标滚动时自动生成后续页面。页面载入完毕后会使用 JS 给现有的元素添加装饰效果。

但是对于使用 AJAX 新生成的部分，却没有效果，因为 JS 执行时查找的是现有元素，新元素生成时 JS 代码已经运行完毕了。

目前知道 jQuery 的 .on 可以绑定事件，从而有机会再次运行 JS 来添加效果。但是感觉绑定 scroll 事件不是非常理想的做法，只需要新内容产生后才再次执行，并不是每次鼠标滚动都执行那个 JS 。

没有任何点击，所以不能绑定 click 事件。那对于 ajax 生成的新内容，最好的再次应用 JS 的方法是什么呢？有没有一个 “新元素被创建” 的事件，或者第三方库可以用？

DOMNodeInserted 事件 IE 不支持，所以不能用。感觉前端的兼容性问题好麻烦。

生成

ajax

绑定

事件

19 replies • 2015-12-08 08:12:41 +08:00

tux

Dec 6, 2015

MutationObserver

FreeDog

Dec 6, 2015

@tux 似乎可用。但是 IE 11+ 才支持。前端渲染还是达不到后端渲染的通用性。

oott123

Dec 6, 2015

你 ajax 生成的新内容，自己在生成之后调用一下添加效果的那段函数不就好了……

FreeDog

Dec 6, 2015

@oott123 也是一个办法，只是 ajax 瀑布流、 JS 特效是两个独立的插件实现，相互调用代码总觉得不太优雅。不过实用性更重要。

jas0ndyq

Dec 6, 2015

“使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。”

FreeDog

Dec 6, 2015

@jas0ndyq 是的，和 on() 方法作用是一样的。只是参数 eventType 不好选， jQuery 并不支持一个类似于 create 的方法。

wd0g

Dec 6, 2015

委派啊,委派对动态生成的元素也有效果

FreeDog

Dec 6, 2015

@wd0g 问题就是委派需要指定一个事件，但是 jQuery 只能绑定常见的 click 等事件。下拉页面并不会产生 click 事件。

hxsf

Dec 6, 2015

@FreeDog 要么 ajax 完了直接调用一下，
要么委派一个自定义事件（ ajax 完成），然后 ajax 完了触发自定义事件。。。(其实两个流程一样。。。)

angelface

Dec 6, 2015

@FreeDog $(document).delegate "selector", event, ->

UnitTest

Dec 6, 2015

ajax 执行完毕之后对新的元素再绑定一下就好了.
反正请求回来知道是哪几个元素.
瀑布流和特效可以分成两个模块,回调一下就好了.

Kabie

Dec 6, 2015

装饰效果为何不用 CSS 。。。

另外把 on 注册在父元素就好……

banri

Dec 6, 2015

父元素事件委托

BOYPT

Dec 6, 2015

这简直是 jquery 的日经贴啊

SourceMan

Dec 6, 2015 via Android

事件代理,事件冒泡

FreeDog

Dec 6, 2015

@SourceMan
@BOYPT
@banri
@Kabie
@UnitTest
@angelface
@hxsf

谢谢各位，问题已解决。初学，请见谅。

banri

Dec 6, 2015

@FreeDog 别在意吐槽，都是从初学者过来的

cqqccqc

Dec 6, 2015

用委托就可以啦！

bramblex

Dec 8, 2015 via Smartisan T1

绑定父元素就好，或者实在不行绑定 body 也可以玩～