2

我在一个表单中有 4 个输入。单击按钮时，它会向表单附加 1 个文本输入。我在每个输入旁边还有一个删除按钮，以便用户可以在需要时删除该行。但我的问题是，单击“添加更多”按钮后，它会附加表单并添加新行，删除按钮不起作用，因为 javascript 不知道它已被添加。我认为像 jquery .live() 这样的东西会起作用，但显然已被弃用。

这是添加更多输入按钮的单击添加的内容。

$("#nameInput").append('<tr><td><input type="text" id="name'+ inputNumber +'" class="names" name="name'+ inputNumber +'" placeholder="Twitch Username..." value="<?php echo $playerName5 ?>"> </td>
<td><input type="text" id="name'+ inputNumber +'Desired" class="desiredNames" name="name'+ inputNumber +'Desired" placeholder="Desired Username..." maxlength="20" value="<?php echo $desiredName5 ?>"> </td>
<td><a class="btn btn-mini delete" href="JavaScript:void(0);"><i class="icon-remove-sign icon-large"></i></a></td></tr>');

你可以在第三行看到我有一个类设置为“删除”。javascript无法识别此类，因为我猜页面加载时最初不存在此信息。

这是我用来删除信息的。

$(".delete").on("click", ".delete", function() {

if (confirm("Are you sure you want to delete this user?")) {

  $(this).closest("tr").find(".names").val("");

  $(this).closest("tr").find(".desiredNames").val("");

  $(this).closest("tr").fadeOut(450);

  inputNumber--

  if (inputNumber <= advancedPlan) {

    $("#addMore").fadeIn(450);

    $("#errors").fadeOut(450);

  }

}

});

编辑：没关系。轻微的拼写错误。你们是对的！谢谢您的帮助。

4

5 回答 5

7

document改为监听 click 事件，如下所示：

$(document).on("click", ".delete", function() {
  // whatever you do to delete this row
})
于 2013-05-15T14:27:36.727 回答
3

您需要使用 jQuery 的on()方法。

$('#nameInput').on('click','.delete',function(){
    //do something...
});
于 2013-05-15T14:22:49.737 回答
2

根据您的代码，这应该有效：

$(document).on('click', '.delete', function() {
    //delete code here
});
于 2013-05-15T14:24:16.310 回答
2

而不是.live你可以.on用于事件委托

$("#nameInput").on('click','.delete',function(){

});
于 2013-05-15T14:24:24.733 回答
0

您可以使用 .on、.live() 方法来执行此操作。您也可以通过 javascript 函数执行此操作，例如：

function xyz(deleteRowID)
{
$('#deleteRowID').remove();
}
于 2013-05-15T14:27:11.307 回答