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 example

我被困在新行中，但未捕获点击事件。

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

Answer 1

我最近遇到过这几次。如果您正在将事件绑定到新表行，则它将不起作用。原因是在进行绑定时行不存在。您可以使用live，但我认为deprecated赞成以下风格。

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

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

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

希望有道理......

Answer 2

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

<强> Demo

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

- 替代已弃用的“实时”方法：使用带有委托签名的“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');
});
});

生成新的表行并捕获该行JQuery的单击

5 个答案: