-2

ユーザーがページ上の特定の div リンクをクリックすると、テーブルに行を動的に追加するスクリプトがあります。ユーザーが不要な追加された行を削除できるように、削除ボタンを追加しようとしていますが、それらを機能させることに問題があります。

テーブルの行を削除するために使用したコードはhereから来ています。私が持っているコードは次のとおりです。

$('.addRow').click(function() {
      var tr = $(
      '<tr><td class="cat"></td>' 
      + '<td class="sel"></td>'
      + '<td><textarea name="paragraph[' + count + ']">Click to edit (id ' + count + ')</textarea><input type="hidden" name="catText[' + count + ']" class="hiddenCat"><input type="hidden" name="selText[' + count + ']" class="hiddenSel">'
      + '</td><td><button type="button" class="removebutton">Remove row</button></td></tr>');
      $('.mainTable > tbody:last').one().append(tr);
      tr.find(".cat").text($(this).closest("li.category").attr("title"));
      tr.find(".hiddenCat").val($(this).closest("li.category").attr("title"));
      tr.find(".sel").text($(this).closest("li.select").attr("title"));
      tr.find(".hiddenSel").val($(this).closest("li.select").attr("title"));
      count++;
    });

     $('.removebutton').click(function() {
      alert('Hello');
      var whichtr = $(this).closest("tr");       
      whichtr.remove();      
    });

addRow 関数は、選択したテーブルにテーブル行を追加します。セルの 1 つに、「removebutton」クラスのボタンがあります。これをクリックすると、行が削除されるはずです。テスト目的で、警告メッセージが使用されます。ただし、addRow で動的に生成されたボタンの 1 つをクリックしても何も起こりません。

「removebutton」クラスでボタンまたはリンクを静的に追加すると、警告メッセージが表示されます。

jQuery を使用してボタンを作成すると、ボタンが機能しなくなる問題があるのはなぜですか?

4

2 に答える 2

2

.on動的コンテンツに使用:

$(document).on('click', '.removebutton', function() {
  alert('Hello');
  var whichtr = $(this).closest("tr");       
  whichtr.remove();      
});
于 2013-05-03T15:45:29.487 に答える
2

動的に作成された要素のイベント委任が必要です

$('.mainTable').on('click','.removebutton',function() {
  alert('Hello');
  var whichtr = $(this).closest("tr");       
  whichtr.remove();  
});

http://api.jquery.com/on/

于 2013-05-03T15:46:50.367 に答える