jQuery类选择器不适用于数据表中JSON生成的元素

Question

我有一个问题，也许我是一个正在提交错误或者根本不了解DOM如何工作的人，我不确定。 关键是我正在使用PHP和以下代码从服务器端处理项目：

$user[] = '<a class="btn btn-default btn-sm" href="' . $this->generateUrl('edit-user', array('id' => $entity->getId()), true) . '"><i class="fa fa-pencil-square-o"></i> Editar</a> <a class="btn btn-danger confirm-delete" data-id="' . $entity->getId() . '" href ="#"><i class="fa fa-times-circle-o"></i> Eliminar</a>';

这将转换为JSON，然后使用此调用：

$('#datatable').dataTable({
    "ajax": Routing.generate('get-list-user'),
    "language": {
        "url": "{{ asset('bundles/backend/js/plugin/datatables/resources/dataTables.spanish.lang.json') }}"
    }
});

它依赖于数据表组件。 生成这样的HTML代码：

<td>
    <a class="btn btn-default btn-sm" href="http://tanane.dev/app_dev.php/admin/user/1/edit"><i class="fa fa-pencil-square-o"></i> Editar</a>
    <a class="btn btn-danger confirm-delete" data-id="1" href="#"><i class="fa fa-times-circle-o"></i> Eliminar</a>
</td>

然后在加载了jQuery和所有必要库的同一模板上，我是rendereando元素，我正在使用此代码：

$(".confirm-delete").on('click', function () {
    var id = $(this).attr('data-id');
    console.log(id);
});

当您单击由PHP生成并在模板中呈现的带有.confirm-delete任何按钮时，该按钮在控制台中对我不起作用。 难道我做错了什么？ 这是DOM的正常行为吗？ 我知道我可以使用.on ()在空中创建元素，如果我记得我使用过的东西，但是在这种情况下对我不起作用，有什么想法或帮助吗？

Answer 1

当您调用以下函数时：

$(".confirm-delete").on('click', function () { 
    //Code 
});

该事件仅附加与.confirm-delete匹配的当前现有DOM元素。 如果您需要动态附加事件，则应使用事件委托 。 事件委托会将事件附加到父元素，但仅在第二选择器与单击的元素之一匹配时才触发事件：

$("#datatable").on('click', ".confirm-delete", function () { 
    //Code 
});

使用该代码，每次单击#datatable ，它将检查是否单击的元素之一是.confirm-delete ；如果是，它将执行该代码。

旁注： this函数内部仍引用.confirm-delete元素