Question

以下是我的编辑和删除链接的生成方式

function getRecords(){            
    $.getJSON( "viewcustomers.php", function(data) {
        var items = [];
        var xTd = '';
        var xTr = '';
        $.each(data, function (key, val) {
            var c=0;
            var id=0;
            $.each(val, function (key1, val1) {
                if(c == 0) {
                    id = val1;  
                }
                c++;
                xTd += '<td>' + val1 + '</td>';
            });
            xTd += '<td><a href="customers.php?update='+id+'" id="update">Edit</a></td>';
            xTd += '<td><a href="customers.php?delete='+id+'">Delete</a></td>';
            xTr = '<tr>' + xTd + '</tr>';
            items.push(xTr);
            xTd = '';
            xTr = '';
        });
        $("#records").append(items);
    });
}

现在你可以看到我在我的编辑网址中使用了id = update。

现在，在我的页面上正确显示记录后，我在单击编辑链接时尝试运行代码。

// Update existing customer
$("#update").click(function(){
    alert("working");
});

上面的代码无效。我已经尝试将它放在文档中。既可以在外面也可以在外面但没有任何效果。

谁能告诉我这里有什么问题？

Answer 1

由于#update元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序。

当您使用$('#update').click(....);注册事件处理程序时，它会将句柄只注册到代码执行时已存在于dom中的那些元素，在这种情况下，因为这些元素是在此之后创建的处理程序不会附加到新创建的元素

试试这个

HTML

<a href="customers.php?update='+id+'" class="urclassname">Edit</a>

脚本

 $("#records").on('click', '.urclassname', function () {
  alert("working");
  });

Answer 2

试试这个

将id更改为class，id应该是唯一的

 xTd += '<td><a href="customers.php?update='+id+'" class="update">Edit</a></td>';
                     ________________________________^_________________

$(document).on('click', '.update', function() {
    alert("working");
});

Answer 3

您还需要使用event delegation，因为有多个元素使用类来处理<a href="customers.php?update='+id+'" class="update">Edit</a>

等元素

然后

$("#records").on('click', '.update', function () {
    alert("working");
});

Answer 4

click无法使用动态生成的元素。由于它与body load上的元素绑定，之后附加的元素不会触发事件，因此需要事件委托。所以试试：

$("#records").on('click', '.update', function () {
    alert("working");
});

单击事件不处理动态生成的元素

4 个答案: