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') }}"
    }
});

它依赖于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 ()来创造空气中的元素，如果我记得我使用过的东西，但在这种情况下不适合我，任何想法或帮助？

Answer 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元素

jQuery类选择器不处理由Datatables中的JSON生成的元素

1 个答案: