Question

我正在尝试将包含.closest & .remove的按钮添加到.append中，但只有现有按钮才有效。我希望能够单击“新行”按钮并使用新行.append，然后还可以“删除”添加的任何行，但只能添加该行中的行。

按钮

<button id="addLine">New Line</button>

单击

将新表添加到

<div id="orderForm">

这是添加的内容

$('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td><td><button id="removeLine">remove()</button></td></tr></table>');

很好并且正常工作。我还添加了

$("#removeLine").click(function () {
 $('#removeLine').closest('.orderLine').remove();
});

但它仅适用于现有的第一行。

这是完整的代码。

<html>
<head>
<?php include '../_includes/jq.inc.php';?><br>
</head>
<body>

<button id="removeAll">Delete All</button>
<button id="addLine">New Line</button>

<div id="orderForm">
<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td>
        <td><button id="removeLine">remove()</button></td>
    </tr>
</table>
</div>

</body>

<script type="text/javascript">

$("#removeLine").click(function () {
 $('#removeLine').closest('.orderLine').remove();
});

<!-- This removes all newLine table rows -->
     $("#removeAll").click(function () {
      $('.orderLine').remove();
    });

<!-- ADDS the 'newLine' table rows -->
    $("#addLine").click(function () {

    $('#orderForm').append('<table class="orderLine" width="90%" border="0" cellspacing="0" cellpadding="0"><tr><td><input name="field1" type="text" id="field1" size="25" tabindex="1"></td><td><button id="removeLine">remove()</button></td></tr></table>');
    });

</script>
</html>

我已经检查过并检查了一下，我不知道我做错了什么。有没有人对此有任何想法？

Answer 1

没有两个元素可以使用相同的id - 使用类和event delegation：

HTML：

<button class="removeLine">remove()</button>

JS：

$("#orderForm").delegate(".removeLine", "click", function () {
    $(this).closest('.orderLine').remove();
});

委派允许您监听由尚未添加到文档的元素触发的事件。在这种情况下，它会附加一个处理程序到orderForm，用于侦听在.removeLine元素上触发的点击事件，这些元素当前存在或将来会添加。

Answer 2

使用.live或.delegate将事件处理程序附加到绑定事件时DOM中不存在的元素。

Answer 3

你应该看一下jQuery.live而不是jQuery.click。 jQuery.click只会绑定一次（在你的情况下只有初始删除按钮），而jQuery.live也会绑定与选择器匹配的新元素。另外我认为最好为你的删除按钮使用一个类，因为你有一个删除按钮，所以一个id是无效的HTML。您只能拥有一个具有相同ID的DOM元素。但是你可以拥有更多同一类的DOM元素。

$('.removeButton').live('click' function() {
  $(this).closest('.orderLine').remove();
});

遇到JQuery问题.closest＆amp; 。去掉

3 个答案: