javascript - jQuery on() 不会在附加标签时触发

Question

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

我有一个动态附加行的表 - 每行的最后一列包含一个链接，单击该链接时应删除该行。目前，行添加得很好，但我无法弄清楚为什么附加到删除按钮的事件没有触发。我已删除删除代码以使用 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;
});

Answer 1

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

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

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