V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
FreeDog
V2EX  ›  JavaScript

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

  •  
  •   FreeDog · 2015-12-06 14:25:33 +08:00 · 2801 次点击
    这是一个创建于 3300 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

    另外把 on 注册在父元素就好……
    banri
        13
    banri  
       2015-12-06 16:36:37 +08:00
    父元素事件委托
    BOYPT
        14
    BOYPT  
       2015-12-06 16:37:35 +08:00
    这简直是 jquery 的日经贴啊
    SourceMan
        15
    SourceMan  
       2015-12-06 16:38:50 +08:00 via Android
    事件代理,事件冒泡
    FreeDog
        16
    FreeDog  
    OP
       2015-12-06 16:58:06 +08:00
    @SourceMan
    @BOYPT
    @banri
    @Kabie
    @UnitTest
    @angelface
    @hxsf

    谢谢各位,问题已解决。初学,请见谅。
    banri
        17
    banri  
       2015-12-06 17:02:05 +08:00
    @FreeDog 别在意吐槽,都是从初学者过来的
    cqqccqc
        18
    cqqccqc  
       2015-12-06 23:29:36 +08:00
    用委托就可以啦!
    bramblex
        19
    bramblex  
       2015-12-08 08:12:41 +08:00 via Smartisan T1
    绑定父元素就好,或者实在不行绑定 body 也可以玩~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   998 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 21:10 · PVG 05:10 · LAX 13:10 · JFK 16:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.