推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
FreeDog

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

  •  
  •   FreeDog · Dec 6, 2015 · 3897 views
    This topic created in 3995 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    19 replies  •  2015-12-08 08:12:41 +08:00
    tux
    tux
    Dec 6, 2015
    1
    MutationObserver
    FreeDog
    FreeDog
    OP
    Dec 6, 2015
    2
    @tux 似乎可用。但是 IE 11+ 才支持。前端渲染还是达不到后端渲染的通用性。
    oott123
    oott123
    Dec 6, 2015
    3
    你 ajax 生成的新内容,自己在生成之后调用一下添加效果的那段函数不就好了……
    FreeDog
    FreeDog
    OP
    Dec 6, 2015
    4
    @oott123 也是一个办法,只是 ajax 瀑布流、 JS 特效是两个独立的插件实现,相互调用代码总觉得不太优雅。不过实用性更重要。
    jas0ndyq
    jas0ndyq
    Dec 6, 2015
    5
    “使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。”
    FreeDog
    FreeDog
    OP
    Dec 6, 2015
    6
    @jas0ndyq 是的,和 on() 方法作用是一样的。只是参数 eventType 不好选, jQuery 并不支持一个类似于 create 的方法。
    wd0g
    wd0g
    Dec 6, 2015
    7
    委派啊,委派对动态生成的元素也有效果
    FreeDog
    FreeDog
    OP
    Dec 6, 2015
    8
    @wd0g 问题就是委派需要指定一个事件,但是 jQuery 只能绑定常见的 click 等事件。下拉页面并不会产生 click 事件。
    hxsf
    hxsf
    Dec 6, 2015
    9
    @FreeDog 要么 ajax 完了直接调用一下,
    要么委派一个自定义事件( ajax 完成),然后 ajax 完了触发自定义事件。。。(其实两个流程一样。。。)
    angelface
    angelface
    Dec 6, 2015
    10
    @FreeDog $(document).delegate "selector", event, ->
    UnitTest
    UnitTest
    Dec 6, 2015
    11
    ajax 执行完毕之后对新的元素再绑定一下就好了.
    反正请求回来知道是哪几个元素.
    瀑布流和特效可以分成两个模块,回调一下就好了.
    Kabie
    Kabie
    Dec 6, 2015
    12
    装饰效果为何不用 CSS 。。。

    另外把 on 注册在父元素就好……
    banri
    banri
    Dec 6, 2015
    13
    父元素事件委托
    BOYPT
    BOYPT
    Dec 6, 2015
    14
    这简直是 jquery 的日经贴啊
    SourceMan
    SourceMan
    Dec 6, 2015 via Android
    15
    事件代理,事件冒泡
    FreeDog
    FreeDog
    OP
    Dec 6, 2015
    16
    @SourceMan
    @BOYPT
    @banri
    @Kabie
    @UnitTest
    @angelface
    @hxsf

    谢谢各位,问题已解决。初学,请见谅。
    banri
    banri
    Dec 6, 2015
    17
    @FreeDog 别在意吐槽,都是从初学者过来的
    cqqccqc
    cqqccqc
    Dec 6, 2015
    18
    用委托就可以啦!
    bramblex
    bramblex
    Dec 8, 2015 via Smartisan T1
    19
    绑定父元素就好,或者实在不行绑定 body 也可以玩~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2111 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 01:43 · PVG 09:43 · LAX 17:43 · JFK 20:43
    ♥ Do have faith in what you're doing.