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

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();
});