2

クリックすると新しいテーブル行が作成されるボタンを含むテーブル行を作成しようとしています。新しい行にも同じ「行を追加」ボタンがあり、そのボタンをクリックして別の行を追加できるようにしたいと考えています。しかし、クリックイベント内に追加された要素にバインドするクリックイベントを取得できないようです。「on」を間違って使用していると確信していますが、これを行う方法がわかりません。

http://jsfiddle.net/vivojack/WkfvC/2/

私の（簡略化された）html

<table id="ct">
    <tbody>
    <tr id="list_items_11" class="list_item">
        <td>This Line</td>
        <td><input type="button" name="addNewArea" class="addNewArea button" value="+"></td>
      </tr>
   </tbody>
</table>

私の（簡略化された）javascript

$('#ct tbody tr td').on('click', '.addNewArea', function(event) {   
    var areaCount = $('#ct tbody tr').length;
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>';
    $(newAreaLine).appendTo('#ct tbody');
    $(this).remove();
});

前もって感謝します。

4

2 に答える 2

1

ワーキングデモ http://jsfiddle.net/Z5Vvc/

$(document).on(「+」などを追加するだけで簡単に接続できます。Doc link は、熱心であれば読むのにかなり適しています。

API ドキュメント: .on- http://api.jquery.com/on/

これがあなたの必要性を助けることを願っています:)

コード

$(document).on('click', '.addNewArea', function(event) {    
    var areaCount = $('#ct tbody tr').length;
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>';
    $(newAreaLine).appendTo('#ct tbody');
    $(this).remove();
});
于 2013-10-09T20:52:20.357 に答える