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

Question

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

Answer 1

可以使用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 对动态生成的元素绑定事件

Answer 2

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

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

Answer 3

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

Answer 4

1.事件委托

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

2.promise的方式写ajax

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

Answer 5

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

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

Answer 6

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