javascript - jQuery.on 函数不起作用

Question

我正在使用 jQuery 1.9.1，我需要对动态添加的 td 执行操作。我尝试使用 jQyuery.on 函数，但没有调用我的代码。请帮忙！这是我的代码

HTML

<div>First Name:
    <input type="text" name="txtFName" id="txtFName" />
    <br/>Last Name:
    <input type="text" name="txtLName" id="txtLName" />
    <br/>
    <input type="button" value="Add User" id="btnAdd" />
</div>
<br/>
<div>Users
    <table id="tblusers">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tbUsers"></tbody>
    </table>
    <br/>
    <input type="button" value="Save Users" />
</div>

Javascript

$(document).ready(function () {
    $('#btnAdd').click(function () {
        var content = "";
        var fName = $('#txtFName').val();
        var lName = $('#txtLName').val(); ;
        content = "<tr><td>" + fName + "</td><td>" + lName + "</td><td class=\"clremove\">Delete</td></tr>";
        $('#tbUsers').append(content);
    });

    $('.clremove').on('click', function () {
        $('#tbUsers tr').remove($(this).closest('tr'));
    });
});

这是我的提琴手

Answer 1

.clremove调用时不存在.on，因此没有任何约束。您想使用事件委托：

$("#tbUsers").on('click', '.clremove', function () {
    $("#tbUsers tr").remove($(this).closest('tr'));
});

Answer 2

由于您clremove是动态添加的，$('.clremove').on('click'..因此事件不会触发（文件中一次不存在）..您可以为此使用 on() 委托事件。

$('#tbUsers').on('click','.clremove' function () {
    $('#tbUsers tr').remove($(this).closest('tr'));
});

如果您想了解更多关于其直接和委托事件的信息，您可以通过该链接。jquery.on