使用 jQuery 为 AJAX 动态添加的 HTML 元素绑定事件

页面有些元素是 AJAX 动态添加的，要给这些元素绑定事件，可以使用 jQuery 中的 on(events,[selector],[data],fn)。

• events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。
• selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
• data:当一个事件被触发时要传递event.data给事件处理函数。
• fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

简单示例：
AJAX 请求数据后，在表格中添加相应数据，并给它们绑定 click 事件。

html:

<table>    <thead>        <th>id</th>        <th>value</th>    </thead>    <tbody id="tbody">    </tbody></table>

js:

/*response = {    code: 1,    data: [        { id: 1, value: 1},        { id: 2, value: 2},        { id: 3, value: 3}    ]} // 后台传回的数据 */// 添加数据到 table 中$.post('请求 url', function (response) { // response: 后台返回的数据    $(response.data).each(function () {        $('#tbody').append('<tr>'+ this.id +'<td></td><td>'+ this.value +'</td></tr>');    });})// 给按每条记录定 click 事件：点击 tr 时，会在控制台打印出 tr 内容。$('#tbody').on('click', 'tr', function () {    console.log(this);});