0

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

これが私のフィドラーです

4

2 に答える 2

5

.clremoveを呼び出すときは存在しない.onため、何もバインドされません。イベント委任を使用したい場合:

$("#tbUsers").on('click', '.clremove', function () {
    $("#tbUsers tr").remove($(this).closest('tr'));
});
于 2013-02-15T06:30:43.850 に答える
1

あなたclremoveは動的に追加されるため、$('.clremove').on('click'..イベントは発生しません（一度にドキュメントに存在しません）..これには on() 委任イベントを使用できます。

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

直接および委任されたイベントについて詳しく知りたい場合は、リンクをたどることができます。jquery.on

于 2013-02-15T06:32:40.573 に答える