0

我有一种感觉，这是我正在犯的一个令人尴尬的简单错误，但我现在看不到它。

我有一个表格，我正在动态地将行附加到 - 每行的最后一列包含一个链接，单击该链接时应删除该行。目前，行添加得很好，但我不知道为什么附加到删除按钮的事件没有触发。我已删除删除代码以使用 console.log() 进行测试，但在控制台中什么也看不到。

我知道 on() 应该使用附加的 HTML，我错过了什么？

http://jsfiddle.net/52Pbk/

HTML：

 <div id="people">
            <table>
                <tr>
                    <th>First Name</th>
                    <th>Second Name</th>
                    <th>Age</th>
                </tr>
            </table>
        </div>
    <a href="#" id="add">Add</a>

JS：

var html = '<tr>';
            html += '<td><input type="text" /></td>';
            html += '<td><input type="text" /></td>';
            html += '<td><input type="text" /></td>';
            html += '<td><a href="#" class="remove_btn">x</a></td>';
        html += '</tr>';

$('.remove_btn').on('click', function() {
       console.log('REMOVE BUTTON CLICKED');            
    //$(this).parent().parent().remove();
                return false;
            });

$('#add').on('click', function() {
    $('#people').append(html);
    return false;
});
4

3 回答 3

4

您正在将click事件处理程序绑定到所有当前的 DOM 元素。您需要.on()为将来动态创建的元素使用事件委托的这种语法。

$("#people").on("click", ".remove_btn", function(e) {
  console.log('REMOVE BUTTON CLICKED');         
  e.preventDefault();
  return false;
});

您需要.on()在未修改的父元素中使用。我#people在这种情况下使用。但是，您也可以使用更接近的父元素来缩小范围。

于 2013-02-24T09:52:34.447 回答
1

当您在 dom 中不可用的元素上应用事件时，就会发生这种情况。因此，您必须将事件委托给其最近的现有父级：

$('table#people').on('click', '.remove_btn',function() {
于 2013-02-24T09:54:32.650 回答
-2

这只是一个订单问题。在调用代码注册 onclick 事件之前，您需要附加 HTML。

$('#add').on('click', function() {
    $('#people').append(html);

    $('.remove_btn').on('click', function() {
           console.log('REMOVE BUTTON CLICKED');            
               //$(this).parent().parent().remove();
                        return false;
                });


    return false;
});
于 2013-02-24T09:52:17.647 回答