我在表单中有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);
}
}
});
编辑:没关系。轻微的拼写错误。你们是对的!谢谢你的帮助。
答案 0 :(得分:4)
听取document
上的点击事件,如下所示:
$(document).on("click", ".delete", function() {
// whatever you do to delete this row
})
答案 1 :(得分:2)
您需要使用jQuery的on()方法。
$('#nameInput').on('click','.delete',function(){
//do something...
});
答案 2 :(得分:2)
根据您的代码,这应该有效:
$(document).on('click', '.delete', function() {
//delete code here
});
答案 3 :(得分:2)
而不是.live
您可以使用.on
进行事件委派
$("#nameInput").on('click','.delete',function(){
});
答案 4 :(得分:0)
您可以使用.on,.live()方法执行此操作。除了你可以通过javascript函数执行此操作,例如:
function xyz(deleteRowID)
{
$('#deleteRowID').remove();
}