Question

我必须为大学做一个网站，我在其中从表格中的数据库加载数据。我的表格如下：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());
    });
...

我希望你有答案。

问候安德烈亚斯

Answer 1

你应该学习Event Delegation。

您可以使用自定义数据 - * 属性来设置值。然后使用.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，您应该使用最近的静态容器。

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

使用Jquery动态选择ID并不起作用

1 个答案: