Question

我在表单中有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);

  }

}

});

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

Answer 1

听取document上的点击事件，如下所示：

$(document).on("click", ".delete", function() {
  // whatever you do to delete this row
})

Answer 2

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

$('#nameInput').on('click','.delete',function(){
    //do something...
});

Answer 3

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

$(document).on('click', '.delete', function() {
    //delete code here
});

Answer 4

而不是.live您可以使用.on进行事件委派

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

});

Answer 5

您可以使用.on，.live（）方法执行此操作。除了你可以通过javascript函数执行此操作，例如：

function xyz(deleteRowID)
{
$('#deleteRowID').remove();
}

附加HTML后Javascript无法正常工作

5 个答案: