0

私はhtmlでテーブルを作成し、それを下のテーブルに入力します(私のdocument.ready関数でdrawTableが呼び出されます)。行ごとに、同じ ID を持つ別の行を追加するためのボタンが最後にあり、すぐ下に挿入されます。table(#fieldTable) td 要素のクリックされたハンドラーは、最初に挿入されたすべてのボタンに対して正常に機能します。「+」ボタンをクリックすると、最後に「-」ボタンのある行が追加されます。これで画面に問題なく表示されますが、クリックすると、テーブル td clicked ハンドラは起動されませんが、ドキュメントは起動されます。

削除 (「-」) ボタンのクリックをキャプチャして、その行をテーブルから削除できるようにしたいと考えています。

function drawTable() {
    //fill a table I created in html, (not important for this question)
            //it now looks like this
    | ID | NAME  |  VALUE  | ACTION |
    | 1  | Test  | <input> |   +    |
            | 2  | Test2 | <input> |   +    |

    //where the action column is a button (+ indicates create a new row)
    //so when they click the grid this gets called
    $('#fieldTable td').click(function() {
    var row = $(this).parent().parent().children().index($(this).parent());
    var col = $(this).parent().children().index($(this));
    if(col != 3)
    { 
      return;
    }
    var text = $(this).parents('tr').find('td:last').text();
    var etiId = $(this).parents('tr').find('td:first').text();
    console.log(text);
    if(text == "+")
    {
      var $tr = $(this).closest('tr');
      var $clone = $tr.clone();
      $clone.find(':text').val('');
      $clone.find('td:nth-child(2)').text('');
      $clone.find('td:nth-child(4)').find('button').text('-');
      $tr.after($clone);
    }
    //so now the grid would look like this
    | ID | NAME  |  VALUE  | ACTION |
    | 1  | Test  | <input> |   +    |
    | 1  |       | <input> |   -    |
    | 2  | Test2 | <input> |   +    |

    //the issue is, if I click the "-" button, this handler does not get called
    // the document.on('click'...) does, but I am not sure how to determine the 
    // row/column of the button click and then remove that row
    else if(text == "-")
    {
      console.log("remove");
      $(this).parent().parent().remove();
    }
    });

    $(document).on('click', '.btnAddRemove', function() {
        console.log("document cliked");
   });
}
4

1 に答える 1

2

イベント委任を使用します。

$("#fieldTable").on("click", "td", function () {

td動的に生成されるため、これを正しく機能させるために変更する必要があるのはこれだけですが、#fieldTable常にそこにあります。

于 2013-06-25T23:55:23.037 に答える