0

私は次のことをしようとしています、

私はテーブル内にテーブルを持っています。ボタンをクリックすると新しい行が追加され、新しい行要素のクリックをキャプチャしたいと思います。

<table id="mytable">
<tr>
    <td><input type="textbox" class="mytb"/></td>
    <td><button id="addButton">Add New Row</button></td>     
</tr>
</table>​

$(document).ready(function(){

// generate new row
$('#addButton').on('click', function(event){
  event.preventDefault();                 
  var newRow = '<tr><td><input type="text" class="newtb"/></td></tr>';
  $('#mytable').append(newRow);        
});

// capture click of new row?
$('.newtb').on('click', function(event){
    event.preventDefault();  
    alert('clicked');
});
});

JSFiddle の例

新しい行が作成されたが、クリック イベントがキャプチャされないという問題が発生しました。

誰かが私を正しい方向に向けることができれば、私は非常に感謝しています.

4

5 に答える 5

2

最近、これに何度か遭遇しました。あなたがやっているように、イベントを新しいテーブルの行にバインドすると、うまくいきません。その理由は、バインディングを行う時点では行が存在しないためです。を使用できますが、次のスタイルを支持して非推奨liveになっていると思います。

on次のようにテーブルにバインドするために使用できます。

$('#myTable').on('click', '.newtb', function (event) {
    //Do stuff
});

これにより、バインド時に DOM に既に存在するテーブルにイベントが設定されます。

それが理にかなっていることを願っています....

于 2012-10-25T07:53:08.700 に答える
1 
$('body').on('click', '.newtb', function(event){
    event.preventDefault();  
    alert('clicked');
});

デモ

于 2012-10-25T07:48:29.370 に答える
0

イベント委任を使用する ... => FIDDLE HERE <=

// 私にとっては、ターゲット要素を「手で」検出するのが最善の方法です!

// クリックされた要素を検出する方法を完全に処理できるため ...

$('#mytable').on('click', function(e){
    var $target = $(e.target), $tr = $target.closest('tr');
    if($tr.length)){
      //  $tr.get(0) is the clicked TR element
      alert($tr.get(0).nodeName+' clicked !'+"\n"+e.target.nodeName+' the actual clicked element');
      event.preventDefault();
      return false;
    }
});

- 非推奨の「ライブ」メソッドの代替: 代わりに委任署名付きの「on」メソッドを使用します

$('#mytable').on('click', 'tr', function(event){
    // don't know if any element inside the tr will be caught while clicking on it
});
于 2012-10-25T07:59:39.257 に答える
0

フィドルで次の更新を参照してください。

http://jsfiddle.net/suF7b/8/

新しいコードを追加するたびに、そのイベント バインディングを作成する必要があります。

$('#mytable').append(newRow);
captureEvent();

function captureEvent() {
    // capture click of new row?
    $('.newtb').on('click', function(event){
        event.preventDefault();  
        alert('clicked');
    });
}
于 2012-10-25T07:49:43.640 に答える
-1

このjsfiddleを見てください：

JSFIDDLE

<table id="mytable">
<tr>
    <td><input type="textbox" class="mytb"/></td>
    <td><button id="addButton">Add New Row</button></td>     
</tr>
</table>​

$(document).ready(function(){

// generate new row
$('#addButton').on('click', function(event){
  event.preventDefault();                 
  var newRow = '<tr><td><input type="text" class="newtb"/></td></tr>';
  $('#mytable').append(newRow);        
});

// capture click of new row?
$('.newtb').on('click', function(event){
    event.preventDefault();  
    alert('clicked');
});
});
于 2012-10-25T07:49:13.140 に答える