JavaScript中的动态表和事件委托

Question

I have a button that adds a row in 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>')};

When i try to catch a td with event handler the result of the events are triggering multiple times. For example, in this case the alert message is popping up mutiple time.

    $('#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");
     )}
     )}

First time i blur out of the td, shows 1 alert message. But the next time i blur out, comes 2 or more alert messages instead of 1. The more i blur out of that td, a lot more alert messages pop up instead of 1.What can be the reason and how to fix it?

Answer 1

Because each time the blur happens, you are adding a new blur handler to the input element.

Instead what you need is a single delegated event handler like below, also since you have name for your input elements, target the input element with the name attribute value.

 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

You are attaching blur event to the text box inside of a blur event handler. This basically causes a new event handler to be attached every time you blur out resulting in the alert being fired multiple times. You could either stop bubbling the blur event from the text box or not bind the blur of text box inside td's blur but do it in some other place.