2

我必须为大学做一个网站，在其中我从表中的数据库加载数据。我的表格如下所示：https ://dl.dropboxusercontent.com/u/6265197/Table.png

首先，我从数据库中加载内容并创建一个表。

...
$.each(data, function (index, item) {
var counter = index;
counter++;
...
table += '<td><a href="#" ' + 'id=edit' + counter + '><img src="img/edit-icon.png"' + '</a> </td>';
table += '<td><a href="#" ' + 'id=delete' + counter + '><img src="img/delete-icon.png"' + ' ></a> </td>';
...

我在正确的唯一 ID 上给出了有效的按钮。

我的意图是，如果按下“edit1”，我可以抓住“name1”来使用它并在数据库中找到它。

例如，我尝试了这个，它只在控制台上给了我一个空字符串。

...
for (var x = 1; x <= 2; x++) {
    $('body').on('click', '#edit' + x, function () {
        console.log($('#name' + x).text());
    });
...

这个基本上可以工作......并在控制台上给我字符串（A Long Way Down）。

...
for (var x = 1; x <= 2; x++) {
    $('body').on('click', '#edit' + x, function () {
        console.log($('#name1').text());
    });
...

我希望你能给我一个答案。

问候安德烈亚斯

4

1 回答 1

3

你应该学习事件委托。

您可以使用自定义data-*属性来设置值。然后使用.data()它来获取它。

示例代码

table += '<td><a href="#" class="edit" data-id="' + counter + '"><img src="img/edit-icon.png"' + '</a> </td>';
table += '<td><a href="#" class="delete" data-id="' + counter + '"><img src="img/delete-icon.png"' + ' ></a> </td>';

$(document).on('click', ".edit", function(event){
    event.preventDefault();
    var id = $(this).data('id');
    var text = $('#name' + id).text()
    console.log(text);
});

代替document你应该使用最近的静态容器。

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将点击事件绑定到动态创建的元素，同时避免频繁附加和删除事件处理程序的需要。

于 2014-06-30T09:08:10.070 回答