Question

我通过jQuery创建动态内容，如下所示：

$('#usersList tbody').append(' \
<tr id="user_4242" class="highlight-tr"> \
    <td class="users-list-name">Dan</td> \
    <td class="users-list-edit" data-userid="{{ $user->id }}" data-toggle="modal" data-target="#userEditModal"> \
        <button class="btn btn-default btn-sm edit-user-btn"><i class="glyphicon glyphicon-edit"></i> Edit</button> \
    </td> \
</tr> \
');

然后，我尝试使用以下内容访问".users-list-name"中的内容

$('.users-list-edit', '#usersList').on('click', function () {
    var name        = $(this).parent().find('.users-list-name').text();
    console.log(name) // dynamic content not working here
});

#usersList是表格的ID。

该点击功能适用于页面加载时已存在的数据。

如何访问此动态附加内容中的数据？

Answer 1

您需要在已存在的元素上添加侦听器，然后等待bobble事件命中它。请尝试以下：

$(document).on('click', '.users-list-edit', function () {
  var name = $(this).parent().find('.users-list-name').text();
});

Answer 2

您在附加这些代码之前绑定了Javascript事件处理程序（如果目标存在，则事件被绑定），这就是为什么它没有工作。

在这种情况下，您应该绑定父类以处理其子事件。

$('#usersList').on('click','.users-list-edit', function () {
    var name = $(this).parent().find('.users-list-name').text();
});

那里的代码意味着：当你点击'.user-list-edit'类及其userList ID的孩子时：将触发事件处理函数（回调）。

Answer 3

试试这个：

$('#usersList').delegate('.users-list-edit', 'click', function(){
  var name = $(this).parent().find('.users-list-name').text();
});

在内容存在之前声明的功能，这就是为什么你无法访问它，你需要使用＆＃34;委托＆＃34;分配给父项的函数，当事件发生时，它会将它委托给您指定的选择器，并且在那一刻DOM对象已经存在。

使用jQuery追加添加动态内容，然后访问它不起作用

3 个答案: