使用.append(）添加的HTML不会触发事件

HTML added with .append() is not triggering events

本文关键字：事件 HTML append 添加 使用      更新时间：2023-09-26

我有一些jQuery从PHP脚本中附加HTML。

jQuery

$.ajax({
    type: "POST",
    url: "newPage.php",
    data: data,
    cache: false,
    success: function(html)
    {
        $('.item1 ul').append(html);
    }
});

PHP

    echo"<li><a href='"#'">".$pages["title"]."<img src='"images/delete.jpeg'" class='"delete del-page'" id=".$pages["pages_id"]." title='"Delete Page'"/><img src=".$state." class='"page-state'" id=".$pages["pages_id"]." title='"Page On'"/></a></li>";

在追加之后，没有任何jQuery事件对新HTML起作用。

您需要使用.on() 委派您的事件

您可以在此处专门阅读

但基本上，您需要将侦听器连接到DOM继承结构中更高的位置。

所以与其这样。。。

$('.selector').on('event', function(e) {...});

做这个

$('.item1 ul').on('event', '.selector', function(e) {...});

为什么

这是因为当您绑定事件时，页面上尚未出现的动态元素仍然会激发事件，它们只是没有处理程序。

由于事件冒泡，树上的所有DOM元素都将听到其子代的事件（除非传播已停止），并可以相应地对其进行操作。

在本例中，当'.item1 ul'听说某个子元素触发了'event'时，如果是'.selector'触发了它，则处理程序将启动。

您可能正在将事件绑定到元素：

$('button').click(function() {
    ...
});

只有当$('button')选择器返回所需的元素时，此操作才有效。您的问题是选择器被调用一次。它不会更新以考虑在调用选择器后创建的元素。

您应该使用事件委派语法将事件绑定到已经存在的父元素：

$('#parent').on('click', 'button', function() {
    ...
});

这样，当#parent接收到click事件时，它将查找与button匹配的元素，并将事件传递给它们。

相关文章：