1

クリックするとjQueryを使用してテーブルに新しい行を動的に追加しますが、ボタンのクリックで行を削除できる機能があります。追加した後に削除しようとすると、動的に追加された行を削除できないという私の問題。

//adding new row to table
    $('button#addRow.btn').click(function(e) {
            e.preventDefault();
            var rowCount = $('#feeds tr').length;
            $('#feeds > tbody:last').append(//here comes tr html)};

//removing rows from table

    $("tr td .delete").on("click", function(e) {
        e.preventDefault();
        $(this).closest("tr").remove()
    });
4

2 に答える 2

4

テーブルの行は動的に追加されるため、イベント デリゲートを使用してイベント ハンドラーを登録する必要があります。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#feeds').on('click', '.delete', function(event) {
    event.preventDefault();
    $(this).closest("tr").remove();
});

.deleteこれにより、要素内の任意のボタンにイベントがアタッチされ、要素ツリー#feeds全体をチェックする必要が減り、document効率が向上します。

参考文献:

于 2013-08-12T11:00:33.357 に答える
1

tr html で次のようなものを使用してみてください。

<tr>
    // whatever ...

    <td>
        <input type="button" onclick="$(this).parent().parent().remove();" value="Delete" />
    </td>
</tr>

そのボタンは、それが属する行を削除します。

于 2013-08-12T11:04:01.730 に答える