Question

$('.delete').on('click',function(){
    console.log("deleteclick");
});

for (i = 0; i < e.data.length;i++){
       $('#methodTable').append('<tr><td>' + e.data[i].isTejimai + 
               '</td><td>'+ e.data[i].isLossProfCut + '</td><td>' +
            '<button id="' + e.data[i].id + 
            '" class="btn btn-default btn-md delete">' + 
            '<span class="glyphicon glyphicon-remove"></span>' + 
            '</button></td></tr>');
}

此代码动态地将<tr></tr>添加到methodTable

这使得html像这样（调试窗口输出）

<button id="6" class="btn btn-default btn-md delete" data-enpassid="__1">
    <span class="glyphicon glyphicon-remove"></span>
</button>

它有类delete，所以如果我点击此按钮，它应该调用delete function，但它不起作用。

如果我不动态生成表格，则此功能有效。

Answer 1

由于.delete元素已动态添加到DOM，因此您应使用委派 on() 附加点击事件，如：

$('body').on('click','.delete',function(){
    console.log("deleteclick");
});

希望这有帮助。

$('body').on('click','.delete',function(){
  console.log("delete click on button "+this.id);
});

for (i = 1; i <= 3;i++){
  $('#methodTable').append('<tr><td>Column 1 </td><td>Column 2 </td><td>' +
    ' <button id="id_'+i+'" class="btn btn-default btn-md delete">' + 
    '<span class="glyphicon glyphicon-remove"></span>' + 
    '</button></td></tr>');
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id='methodTable'></table>

Answer 2

而不是：

$('.delete').on('click',function() {
    //your operations 
});

使用以下内容：

$('body').on('click', '.delete', function() {
    //your operations
});

Answer 3

在JavaScript中，当您想要将任何事件绑定到特定元素时，在绑定该事件之前该元素应该存在（即使是与之前相同的元素，您也是新建的）。

这就是为什么像 AngularJs 这样的JavaScript框架如此着名，以达到您想要的效果。

是否无法获得动态生成的点击表？

3 个答案: