javascript - 添加了 .append() 的 HTML 不会触发事件

Question

我有一些 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>";

附加后，新 HTML 上没有任何 jQuery 事件起作用。

Answer 1

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

你可以具体阅读这个here

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

所以不是这个...

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

这样做

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

---

为什么？

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

感谢event bubbling树上的所有 DOM 元素都将听到其后代的事件(除非传播已停止)，并可以相应地对其进行操作。

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