Question

我有一个在mytable

中添加一行的按钮

   function addRow() {

    $('#mytable').append('<tr>' +
    '<td ><div style="width:187px">' +
    ' <input type="text" value="" style="width: 150px" name="item.Account_Code"  >' +
    '<button type=\'button\' style="position: relative; left:3px" id="AccCode">...</button>' +
    '</div></td>' +
    '<td><input type="text" style="width: 200px" name="item.Description"></td>' +
    '<td><input type="text" value="0.00" style="width: 100px" name="item.Debit_Amt" onkeydown="return ValidateNumber(event);"></td>' +
    '</tr>')};

当我尝试使用事件处理程序捕获td时，事件的结果会多次触发。例如，在这种情况下，警报消息会弹出多个时间。

    $('#mytable').delegate("td", "blur", function () {

    var self = $(this);
    var tr = self.closest('tr');
    index = tr.index();

     $('#mytable').find('tr:eq(' + index + ')').find('td:eq(1)').find('input[type=text]').blur(function () {
     alert("abcd");
     )}
     )}

我第一次模糊了td，显示1条警报消息。但是下次我模糊了，会发出2条或更多警报消息而不是1条。我越是模糊了td，会弹出更多警报消息而不是1.可能是什么原因以及如何修复它？ / p>

Answer 1

因为每次模糊发生时，您都会向input元素添加一个新的blur处理程序。

相反，您需要的是单个委托事件处理程序，如下所示，因为您的输入元素有name，所以使用name属性值定位输入元素。

function addRow() {

  $('#mytable').append('<tr>' +
    '<td ><div style="width:187px">' +
    ' <input type="text" value="" style="width: 150px" name="item.Account_Code"  >' +
    '<button type=\'button\' style="position: relative; left:3px" id="AccCode">...</button>' +
    '</div></td>' +
    '<td><input type="text" style="width: 200px" name="item.Description"></td>' +
    '<td><input type="text" value="0.00" style="width: 100px" name="item.Debit_Amt" onkeydown="return ValidateNumber(event);"></td>' +
    '</tr>')
};

$('#mytable').on('blur', 'input[name="item.Description"]', function () {
    //or $('#mytable').delegate('input[name="item.Description"]', "blur", function () {
    alert("abcd");
});

$('button').click(addRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="">Add</button>
<table id="mytable"></table>

Answer 2

您正在将模糊事件附加到模糊事件处理程序内的文本框中。这基本上会导致每次模糊时都附加一个新的事件处理程序，导致多次触发警报。您可以停止从文本框冒泡模糊事件，也可以不在td的模糊中绑定文本框的模糊，但在其他地方执行。

Javascript中的动态表和事件委托

2 个答案: