[英]How can I prevent double binding on JavaScript?
这是我的情况,我有一个可以动态添加/删除行的表,我需要在页面加载时绑定删除行。
这是我的代码:
<script type="text/javascript">
$(document).ready(function(){
$(".btnRemoveRow").bind("click", removeRow); });
</script>
但当我在外部js上添加行时,我还需要绑定另一个removeRow
function addRow(){
{--add row code here--}
$(".btnRemoveRow").bind("click", removeRow);
}
这样新添加的行也将与removeRow函数绑定在一起,
这是我的removeRow函数:
function removeRow(){
var row = $(this).closest('tr');
var selected = row.find('input.qty,input.price,textarea,select').val();
$.getScript("calculate.js", function(){});
if(selected)
{
var r=confirm("Confirm Remove?");
if (r==true)
{
row.find('input.qty,input.price,textarea,select').attr("disabled", true);
row.find('input.hidden-deleted-id').val("yes");
row.find('.subtotal>center>h3').text("0");
calculate();
row.hide();
return false;
}
else
{
return false;
}
}
else{
row.find('input.qty,input.price,textarea,select').attr("disabled", true);
row.find('input.hidden-deleted-id').val("yes");
row.find('.subtotal>center>h3').text("0");
calculate();
row.hide();
return false;
}
};
情况1:当我删除行而不先添加任何行时,它工作正常(对话框仅出现一次)。
情况2:当我先添加行然后删除准备好在页面上绑定的行时,对话框出现两次。
情况3:当我删除添加的行时,它工作正常(对话框出现一次)。
(PS:仍在学习JavaScript)
知道如何解决第二号案件吗?
添加一个委派的事件处理程序,这样它将对现有元素和将来的元素起作用
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", ".btnRemoveRow", removeRow);
});
</script>
用最接近的非动态父元素替换document
。
尝试这个:
<script type="text/javascript">
$(function(){
$(".btnRemoveRow").click(function(){removeRow();});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.