动态插入的表：JQuery未检测到最后一行

Question

I'm using JQuery for creating dynamic table row based on user insertion.

My HTML:

     <table id="list">
            <thead>
              <tr>
                <th>first header</th>
                <th>second header</th>
                <th>third header</th>
              </tr>
            </thead>
             <tbody>
               <tr>
                 <td><input type="text" name="first" /></td>
                 <td><input type="text" name="second" id="second" /></td>
                 <td><button class="alert hollow button" href="#">X</button>                 </td>
               </tr>
             </tbody>
     </table>

And JavaScript:

$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) {

    if ($(this).val().length > 4 && $('#list tr:last td:nth-last-child(2) input[name=second]').val().length > 4) {
        $('#list tbody').append('<tr>
                     <td><input type="text" name="first" /></td>
                     <td><input type="text" name="second" id="second" /></td>
                     <td><button class="alert hollow button" href="#">X</button></td>
                   </tr>');
    }
});

The above code only works for the first row and the inserted row has no JS code-behind.

Answer 1

You haven't given complete code, but i suspect this is your issue..

Replace this

$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event)

with this

$('#list').on('keyup', 'tr:last td:nth-last-child(2) input[name=second]', function (event)

You are probably not using proper event delegation, and you're trying to bind a keyup event on an element that doesn't exist yet (you say the rows are added dynamically). Instead we bind the keyup to the table that is part of the initial document, and say what happends when a child that meets X criteria has a keyup event fired

Answer 2

您的函数不绑定不上的页面加载存在的元素，使用on动态生成的元素

$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {