• 3.4k

进入页面时如果在一个异步请求里渲染了一个DOM结构,那么和这个DOM结构相关的交互js都要写在请求完成的回调函数里吗

就是说我进入页面的时候要请求一个表格数据,但是我还要操作这个表格。编辑删除之类的。在异步请求完成时后的回调函数里我可以循环遍历将数据插入表格,但是后期的操作呢,以及操作之后又产生的ajax请求呢?都要写在完成的回调函数里嘛?那么整个页面就是一个大的ajax里边套着渲染DOM,操作DOM,还有各种操作DOM产生的新的ajax了。我不知道这样做合理不合理。如图所示:

clipboard.png

阅读 3.1k
评论
    6 个回答
    • 1.5k

    可以使用jquery的on来绑定事件
    绑定事件一般这样写,

    $('.class').on('click', function(){})

    但是,如过.class这 dom 元素,是异步生成的,上面代码就不会触发了.
    就是,如果绑定事件的时候,该 dom 元素不存在,后面再生成,事件是没有绑定上的.
    所以,可以这样写

    $('body').on('click', '.class', function(){})

    这样写,是为 body 下面的.class 元素绑定点击事件,这样绑定,即使.class是动态生成的,也可以触发绑定的事件
    所以,你的问题,可以用下面代码解决

    // 编辑
    $('.good').on('click', '.edit', function(e){
    })
    //删除
    $('.good').on('click', '.del', function(e){
    })
    //分享
    $('.good').on('click', '.share', function(e){
    })

    其实我有点不明白你想问的是什么.
    我回答的内容是,怎样使用 jquery 对动态生成的元素绑定事件

      • 4.9k

      事件会往上冒泡,你在上层确定的节点总能拿到下层事件(只要冒泡没被干掉,即使下层结构是变化的也没问题),所以可以在上层统一处理。

      可以搜索“事件委托”,“事件代理”这些内容。

        如果用js生成dom,对应的dom的操作也只能在生成后动态绑定,但有些地方是可以优化的,比如一个表格,能在table上绑定事件尽量在table上绑定,把处理每一行操作的事件统一交给table上的事件监听做,而不是一行绑定一个事件,这样效率低。另外,没看懂你为什么要把begin-search、del、submit-sort这几个事件绑定也写到回调里,写到外面更加简洁些。

          1.事件委托

          解决办法专业术语叫“事件委托”,父级统一绑定事件,由于“事件冒泡机制”会被子级的相应事件触发。父级的事件对象有event.target 可以判断是是哪个子级触发的事件。然后根据判断代码相应处理。

          2.promise的方式写ajax

          如果你希望把事件绑定到‘动态的子级’的话,如果用es6或jQuery的promise来实现ajax,那么可以把成功的回调写在then方法里,链式操作多个then,书写起来像同步操作一样,免去了多层嵌套的混乱。。

            • 5.2k

            1.看到题主已经用了jq,如果不想用字符串拼接的办法动态插入的话,可以选择像$.tmpl这样的jq插件,只要按照规范,把模板写好,在异步回调后,把数据传入即可。当然,用mustache.js这样的模板引擎也行。

            2.异步回调后的模板里,再有click事件,需要这么写$(document).on('click', 'actionName', function(){}),因为是动态插入的,要用on做优化绑定。

              我都是把dom绑定好,然后通过ajax数据来控制表格的显示
              如果要绑dom事件的话,执行js时dom必须是存在的,或者可以用上面提到的jquery on

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章