javascript - Javascript 中的动态表和事件委托(delegate)

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 条。原因是什么以及如何解决？

Answer 1

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

相反，您需要的是如下所示的单个委托(delegate)事件处理程序，而且由于您的输入元素有 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>