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()

委派您的活动

您可以专门阅读此here

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

所以不要这样......

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

这样做

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

为什么？

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

感谢event bubbling树上的所有DOM元素都会听到它们后代的事件（除非传播已经停止），并且可以相应地对它们采取行动。

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

Answer 2

您可能将事件与元素绑定在一起：

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

仅当$('button')选择器返回所需的元素时，此方法才有效。您的问题是选择器被调用一次。它不会更新为在调用选择器后创建的元素的帐户。

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

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

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

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

2 个答案:

为什么？