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

Question

我有一些来自 PHP 脚本的 jQuery 附加 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 上起作用。

Answer 1

您需要将您的活动委托给.on()

您可以在这里专门阅读相关内容

但基本上您需要将侦听器附加到 DOM 层次结构中更高的位置。

所以而不是这个...

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

做这个

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

为什么？

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

由于事件冒泡，树上的所有 DOM 元素都会听到其后代的事件（除非传播已停止），并可以相应地对它们采取行动。

在此示例中，当'.item1 ul'听到 an'event'已从其子元素之一触发时，如果是它'.selector'触发的，则处理程序将触发。