Question

我正在向表中添加一行。这工作正常，但该行包含一个附加了click（）的按钮。每当我添加一行时按钮就会触发。见jsfiddle

<script>
//adds row to table
$('#btnSAS').click(function (e) {
   $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></tr>');
});

    
 //delete row
$('button').click(function () {
   alert('delete');
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>1</td><td><button class="btn btn-default btn-sm" type="button">blah</span></td></td>
    </tr>
</table>
<button class="btn btn-default btn-sm" id="btnSAS" type="button">Add Row<span class="glyphicon glyphicon-plus" aria-hidden="true"></span

Answer 1

您正在将处理程序附加到每个按钮，包括＆＃34;添加行＆＃34;按钮：

$('button').click(function (e) {
   alert('delete');
});

因此，它不是来自新行的按钮，而是＆＃34;添加行＆＃34;按钮本身。 $('#btnSAS').click()处理程序和$('button').click()处理程序都适用于＆＃34;添加行＆＃34;按钮，所以都适用。

编辑问题之前的代码实际上解决了问题，因为它只将处理程序应用于表格按钮：

$('button').click(function (e) {
   alert('delete');
});

然而，正如其他人所指出的，这只适用于分配处理程序时存在的按钮（页面加载时）。

这是与jQuery的常见混淆。您只能将处理程序应用于DOM中存在的内容（已在网页上）。

解决这个问题的方法是使用委托（指定现有元素来监视点击次数）。在这种情况下，您可以将委托处理程序分配给table元素，然后根据它们是否来自按钮来过滤点击次数：

$('table').on('click', 'button', function () {
   alert('delete');
});

在这种情况下，任何源自表的点击都会针对'button'选择器进行过滤，然后在过滤后的结果上调用处理程序。

小提琴：http://jsfiddle.net/ow3b6pjf/16/

Answer 2

从你的解释中弄清楚你想要的功能是多么困难，但经历了几次，我想我可以告诉你要做什么。

您使用删除功能$('button')处理文档中的每个按钮，但添加新行时不会更新。尝试使用类似这样的东西，将该单击监听器应用于表格内的按钮。

//adds row to table
$('#btnSAS').click(function (e) {
   $('table tr:last').after('<tr><td>x</td><td><button class="btn btn-default btn-sm" type="button">blah</button></td></tr>');
});


 //delete row
$('table').on('click', 'button', function () {
   alert('delete');
});

此外，您的HTML格式错误且不包含<button>的结束标记，还有一个额外且不必要的</td>标记。

这是一个更新的小提琴：

http://jsfiddle.net/ow3b6pjf/15/

使用/ jQuery添加按钮导致按钮提交

2 个答案: