使用 jquery 在函数中添加删除按钮
Adding remove button with in function using jquery
我正在尝试添加删除按钮,但不幸的是,从addRow函数中填充的已删除按钮不起作用。我不知道我错过了什么.
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow(){
$(this).closest('tr').remove();
}
$(function () {
//$("#addRow").click(function ()
$(document).on("click", "#addRow", function(){
$('#container tr:last').after('<tr>'n'
<td><select name="materialID[]" ><option value="0">Select A Material</option><?php echo str_replace("'", "'''", $options); ?></select></td>'n'
<td>Quantity: <input type="text" name="qty[]" /></td>'n'
<td><select name="SupplierID[]" ><option value="0">Select A Supplier</option><?php echo str_replace("'", "'''", $options2); ?></select></td>'n'
<td><button class="deleteRowButton" type="button">Remove</button></td>'n'n'
</tr>');
});
});
</script>
使用 jQuery 的 DeleteRow 函数的初始赋值是针对当时页面上的所有内容运行的。 添加新行时,赋值尚未添加到该特定(新)元素,因为它以前从未存在过。
为了使它工作,您需要添加一个单击事件,或者重新运行jQuery以将该事件添加到.deleteRowButton类中,以便所有新类都具有它。
当您以动态方式添加 html 时,该事件不会位于添加的按钮中,因为当文档准备就绪时,这些事件已附加到页面上的按钮中,并且不会附加到新按钮上。
试试这个:
$(document).ready(function() {
$(document).on('click', '.deleteRowButton', function () {
$(this).closest('tr').remove();
}
}
试一试,让我知道它是否有帮助!
相关文章:
- JS动态添加字段-删除按钮不起作用
- DateTimePicker:函数从minDate maxDate添加删除日期
- 如何根据某些条件向可编辑的jquery数据表添加或删除按钮
- 克隆字段上的“添加-删除”按钮
- 删除jQuery添加的按钮
- 单击单选按钮,添加/删除表单元素的类
- 添加一个按钮,该按钮在单击时调用内容脚本函数
- 单击JavaScript添加和删除类函数
- 使用 jquery 在函数中添加删除按钮
- 如何在使用Angular.js打开新行后添加删除按钮
- 添加删除圆圈按钮
- 添加/删除基于所选单选按钮的下拉选项
- jquery JavaScript 添加/删除按钮
- 使用KnockoutJS在添加/删除按钮之间切换
- 应用程序有错误.意外的标记."尝试添加删除按钮
- 为每个图像缩略图预览添加删除按钮
- 如何在jQuery的clone()方法中为新添加的表行添加删除按钮
- 如何在列表中添加删除按钮
- 如何在每行添加删除按钮
- 为附加元素添加删除按钮