在生成的html表上注册click事件[重复]

Question

这个问题在这里已有答案：

• Event binding on dynamically created elements? 23回答

我在ajax回调上生成html表格

...
success: function (data) {
    if (data != undefined) {
        var table = $("<table id='carTable' />").addClass("table table-striped table-bordered table-condensed");
        var header = $("<thead/>").html("<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th><th>g</th>");
        table.append(header);
        for (var i = 0; i < data.length; i++) {
            var row = $("<tr/>");
            row.append($("<td id='carId'/>").html(data[i].Id));
            row.append($("<td id='name'/>").html(data[i].Name));
            row.append($("<td/>").html(data[i].Color));
            row.append($("<td/>").html(data[i].Doors));
            row.append($("<td/>").html(data[i].Fuel));
            row.append($("<td/>").html(data[i].Injection));
            row.append($("<td/>").html(data[i].Desc));
            table.append(row);
        };
        $("#carsTable").html(table);
    }
},
...

在使用javascript的同一页面上，我想识别此carTable生成的代码段的表行上的click事件。

 $('#carTable tr').on('click', function (e) {
      console.log('click!');
  });

这是因为回调中生成的html以及它是如何解决这个问题的？

Answer 1

$(document).on('click', '#carTable tr', function(e) {
  console.log('click!');
});

将在每次与第二个参数中的选择器匹配的单击时触发回调函数，无论它是从第一次呈现页面开始，还是稍后通过JavaScript添加。

但请注意，这确实需要在文档的任何位置单击每次内部触发的价格，jQuery将在内部检查条件是否匹配。

所以更好的方法是将click事件委托给表：

$('#carTable').on('click', 'tr', function(e) {
  console.log('click!');
});

这基本上是相同的，只是不绑定到整个文档的每次单击。