Question

我看到很多类似的问题，但没有直接针对我的问题。我的问题的业务逻辑是，我允许用户打开jQuery Dialog，我在其中创建从数据库中加载数据的表，当用户进行选择时，我从主屏幕加载选定的数据信息字段。

我目前的问题是从点击按钮时发生的<tr>收集数据。如果它是一个硬编码表我只会：

$(selector).on('click', function(){
  var $item = $(this).closest("tr").find('td');
})

然后使用$item执行某些操作但是每次执行Ajax请求时动态创建表（来自Ajax请求）表被销毁并重新创建，所以基本上我不能或至少我不＆＃ 39;知道一种使用某种选择器绑定事件的方法，这样我就可以重现上面的代码。

相反，在动态表中，我有这个：

      <td><button onclick="getData();return false">Select</button>

这个问题（至少我怎么看）是两个 - 首先是在onclick元素中使用HTML。据我所知，这不是一个好的做法，还有更好的选择，我很乐意回答这一点。此外，即使我使用此代码，我仍然无法从以下<td>中提取文本：

function getData() {
...
}

我尝试了几种方法，包括使用静态表和绑定事件处理程序的方法。

最后这里有一个JS Fiddle示例，我想我已经明确了我能做什么和不能做什么，所以你可以参考它。

Answer 1

选中此fiddle

$(selector).on('click', function(){
  var $item = $(this).closest("tr").find('td');
})

使用上面的代码绑定direct事件，但您想要的事件是delegated事件

要使用delegated事件，您应该使用

$(document).on('click',selector, function(){
  var $item = $(this).closest("tr").find('td');
})

所以你的最终代码看起来像

$(document).on('click','.get-data' ,function(){
    var $item = $(this).closest("tr").find('td');
    $.each($item, function(key, value){
        alert($(value).text());
    })
});

document可以是将要创建的表的父级。

不要忘记在添加新表格元素时添加选择器

Answer 2

我有同样的问题并以这种方式解决了。您可以使用以下数据库结果创建表：

for (var i = 0; i < results.length; i++) {
   // create table row and append it to the table using JQuery
   // next create a td element, append it to the created tr
   // and attach a listener to it
   $('<td/>').html(results[i].textProperty)
             .appendTo($(tr))
             .on('click', getData);
}

其中getData（）是你的功能。

您可以将参数传递给getData，如下所示：

.on('click', {info: results[i].data}, getData);

然后你可以在你的函数中访问它们：

function getData(event) {
    console.log(event.data.info);
}

希望这有帮助！

编辑：这样你就可以为每个td创建一个监听器。优化可以是为整个td元素类创建一个监听器，并通过HTML属性或文本值将数据传递给它，就像批准的答案一样。

Answer 3

或者您可以在getdata方法中使用此传递对象

$('#build-table').on('click', function(){
        $('#temp-table').append('<table><thead><tr><th>Select</th><th>Name</th>    </tr></thead>' +
        '<tbody><tr><td><button class onclick="getData(this);return false">Select</button></td><td>Name1</td></tr>' +  
       '<tbody><tr><td><button onclick="getData(this);return false">Select</button></td><td>Name2</td></tr>' +
                                '</tbody></table>')
    });

    function getData(ob) {

    var $item = $(ob).closest("tr").find('td');
        $.each($item, function(key, value){
            alert($(value).text());
        })
    }

如何从动态创建的表中获取td值

3 个答案: