Question

当我使用jQuery.ajax（）将某些PHP的HTML内容加载到页面上的元素时，jQuery选择器不能处理加载的HTML中的元素。

这是一个常见问题，还是我必须将一个例子放在一起？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../jquery.js" type="text/javascript"></script> 
</head>
<body>
    <div id="htmlcontent">
        <a href="#">Blah</a><br />
        <a href="#">Bleh</a><br />
    </div>
    <div id="replacecontent">
        <br /><a href="#">Replace content</a>
    </div>
    <script type="text/javascript">
        $("#htmlcontent a").click(function() {
            alert("Clicked on a link!");
        });
        $("#replacecontent a").click(function() {
            $("#htmlcontent").html('<a href="#">This doesn't alert(). Why?</a>');
        });         
    </script>
</body>

好的，那不是太难。：）

Answer 1

我确定你的选择器很好。可能是事件处理程序没有正确绑定。你在使用.bind（）或.click（）吗？一个常见问题是您无法使用这些标准事件来绑定到页面上尚不存在的元素。您可能需要查看.live()，它会为与当前选择器匹配的所有元素附加事件处理程序，现在和将来。

所以试试这个：

    $("#htmlcontent a").live('click', function() {
        alert("Clicked on a link!");
    });

Answer 2

修改DOM后，选择器不起作用，因为它们所附加的元素将被操作或删除。如果您想绕过此操作，则必须使用$.live()或$.delegate()。

这是.live()事件附件的解释：

.live（）方法能够影响尚未添加的元素通过使用事件到DOM 委托：绑定到的一个处理程序祖先元素负责在其上触发的事件后人。处理程序传递给 .live（）永远不会绑定到元素; 相反，.live（）绑定一个特殊的处理DOM树的根。

Answer 3

在绑定click()事件时，您尝试选择的元素不存在于DOM中。

查看jQuery.delegate()：根据一组特定的根元素，为现在或将来与选择器匹配的所有元素的一个或多个事件附加处理程序。

    $("#replacecontent").delegate("a", "click", function() {
        $("#htmlcontent").html('<a href="#">This will work now alert(). Why?</a>');
    });

我更喜欢.delegate()而不是.live()，因为它更有效率，为我们提供了一种为选择器指定上下文的简便方法。使用.live()时，必须将整个文档的每次点击与指定的选择器进行比较，而.delegate()只是$("#replacecontent")容器中的元素。

jQuery / Ajax - 选择器不起作用

3 个答案: