javascript - 动态插入表: last row not detected by JQuery

Question

我正在使用 JQuery 根据用户插入创建动态表行。

我的 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>

和 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>');
    }
});

上面的代码仅适用于第一行，插入的行没有JS代码隐藏。

Answer 1

您没有提供完整的代码，但我怀疑这是您的问题..

替换这个

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

有了这个

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

您可能没有使用正确的事件委托(delegate)，并且您尝试在尚不存在的元素上绑定(bind) keyup 事件(您说行是动态添加的)。相反，我们将 keyup 绑定(bind)到作为初始文档一部分的表，并说明当满足 X 标准的子级触发 keyup 事件时会发生什么