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

【问题标题】：jQuery class selector is not working on elements generated by JSON in DatatablesjQuery 类选择器不适用于数据表中 JSON 生成的元素
【发布时间】：2014-11-10 20:51:08
【问题描述】：

我遇到了问题，也许是我自己犯了错误，或者根本不了解 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') }}"
    }
});

它依赖于 Datatable 组件。生成这样的 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 () 在空中创建元素，如果我记得我使用的但在这种情况下对我不起作用，有什么想法或帮助吗？

【问题讨论】：

你应该使用event delegation。 $("#datatable").on('click', ".confirm-delete", function () {});
@Ninsly 哦，你是个天才，现在我学到了一些新东西，这就是问题所在。请发布答案给您积分并接受您的回复

标签： javascript jquery html dom jquery-selectors

【解决方案1】：

当你调用以下函数时：

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

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

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

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

旁注：函数内部的this仍然指的是.confirm-delete元素

【讨论】：