V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
sbmzhcn
V2EX  ›  jQuery

Jquery 如何实现 Ajax 自动更新 table,并且不影响 js 事件

  •  
  •   sbmzhcn · 2016-06-03 22:28:27 +08:00 · 3547 次点击
    这是一个创建于 3094 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求:

    点击编辑按钮,自动弹出遮罩层,可以更新新建一条记录,当这一条记录新建完成后,遮罩层在不点击关闭的情况下,遮罩层后面的 table 可以实现自动更新。

    遮罩层 使用的是 jquery confirm

    但自动更新 Table 搞不定,使用 ajax 更新当前的 html 也是可以,但如果更新后, table 绑定的 js 事件却无法使用了。请问有什么好的办法解决吗?

    如果使用的是 datatables js 如何做呢?
    15 条回复    2016-06-05 13:42:49 +08:00
    Jaylee
        1
    Jaylee  
       2016-06-03 22:31:14 +08:00
    请搜索“事件委托”
    emric
        2
    emric  
       2016-06-03 22:33:17 +08:00
    事件委托
    jugelizi
        3
    jugelizi  
       2016-06-03 22:50:52 +08:00
    $('table').on('click','td',function(alert(1)))
    sbmzhcn
        4
    sbmzhcn  
    OP
       2016-06-03 23:50:15 +08:00 via iPhone
    @jugelizi 你这个也太简单了 这么容易我不会问了。

    这个问题看似简单 其实也没那么简单
    hxtheone
        5
    hxtheone  
       2016-06-04 00:49:55 +08:00
    刷新 table 后重新绑定事件?
    br00k
        6
    br00k  
       2016-06-04 10:05:12 +08:00
    如果元素是动态加入的,事件绑定用$(document).on("click",".table",function(){})
    Arrowing
        7
    Arrowing  
       2016-06-04 10:31:29 +08:00
    具体问题具体分析
    1 、你重新改变的 html 最好不要改变到你绑定事件的元素上
    2 、假如 1 没办法做到,那就重新再绑定一次事件
    azh7138m
        8
    azh7138m  
       2016-06-04 11:40:59 +08:00 via Android
    @sbmzhcn 3L 这个就是事件委托,没有问题
    shawshi
        9
    shawshi  
       2016-06-04 12:01:12 +08:00
    理论上 js 添加代码,最好使用事件委托实现,如果没有实现,请检查一下代码以及绑定的事件。只看描述,不一定能完全回答正确
    sbmzhcn
        10
    sbmzhcn  
    OP
       2016-06-04 12:28:49 +08:00
    @azh7138m 我这样用了,不行。
    sbmzhcn
        11
    sbmzhcn  
    OP
       2016-06-04 12:29:57 +08:00
    @sbmzhcn 当时不懂什么委托,但的确发现这样写,后面的 js 更改,也能监听到事件,但对于某些情况好像不行。比如我说的 datatables js.
    azh7138m
        12
    azh7138m  
       2016-06-04 14:47:48 +08:00
    @sbmzhcn 那是 table 变了,你可以再往上一层,直接用 document 也行 就是 6L 那样
    jydeng
        13
    jydeng  
       2016-06-04 18:50:45 +08:00
    6 楼那样应该可以,事件都绑定在 document 上,更新 table 不影响的。
    warjiang
        14
    warjiang  
       2016-06-05 09:23:15 +08:00   ❤️ 1
    不要直接给每行绑定事件,直接把每行上的事件委托到 table 来执行, table 上相应事件的冒泡,做下简单判断就可以了
    可以参考下这个 http://www.spotty.com.cn/archives/34/
    Jakesoft
        15
    Jakesoft  
       2016-06-05 13:42:49 +08:00
    三楼这个可以
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1080 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:58 · PVG 02:58 · LAX 10:58 · JFK 13:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.