jquery - 生成新表行并捕获该行的点击 JQuery

Question

我正在尝试执行以下操作，

我在表格中有一个表格，当单击按钮时，我有一个带有按钮的输入，添加了一个新行，然后我希望捕获对新行元素的任何点击。

<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 示例

我被困在创建新行但未捕获单击事件。

如果有人能指出我正确的方向，我将不胜感激，但有人可以解释为什么会发生这种情况，因为我真的被卡住了，想增加我的 JavaScript 知识。

Answer 1

我最近遇到过几次。如果您将事件绑定到新的表格行，它将不起作用。原因是在您进行绑定时这些行不存在。您可以使用live，但我认为它已被弃用以支持以下样式。

您可以使用on将其绑定到表，如下所示：

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

这会在表上设置事件，该事件在绑定时已经存在于 DOM 中。

希望这是有道理的......

Answer 2

$('body').on('click', '.newtb', function(event){
    event.preventDefault();  
    alert('clicked');
});

演示

Answer 3

请在您的小提琴中查看以下更新。

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');
    });
}

Answer 4

使用事件委托 ... => 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;
    }
});

- 替代已弃用的“live”方法：使用“on”方法和委托签名代替

$('#mytable').on('click', 'tr', function(event){
    // don't know if any element inside the tr will be caught while clicking on it
});

Answer 5

看看这个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');
});
});