jQuery:选择器不适用于 ajax 加载的内容

jQuery: selectors dont work on ajax loaded content

本文关键字：加载 ajax 适用于 选择器 不适用 jQuery      更新时间：2023-09-26

这是一个简单的脚本，我希望sum1调试并报告我的错误。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#content1").click(function() {
                    $("#content2").load("test.php");
                });
                $("span").click(function() {
                    $(this).css("font-size", "30px");
                });
            });
        </script>
    </head>
    <body>
        <div id="content1">Click to load content2</div>
        <div id="content2"></div>
    </body>
</html>
-

-测试.php--

<span>Click to format content 2&#60;/span><br>

现在我的问题是 span 的选择器不起作用。

事件委派：

$("#content2").on("click", "span", function()

试试这个：

$("body").on("click","span",function(){
    $(this).css("font-size","30px");
});

只需在 $（"#content2"）.load 函数的成功事件中添加跨度单击函数

这样，新的跨度点击绑定函数只有在新的跨度

加载到页面后才会触发，因此点击事件也会应用于新的跨度。

 <script>
            $(document).ready(function() {
                $("#content1").click(function() {
                    $("#content2").load("test.php",function(){
                       // Now the click event is assigned after the span is loaded.
                       // Hence its applied to newly loaded span as well
                       $("span").click(function() {
                         $(this).css("font-size", "30px");
                       });
                    });
                });
            });
</script>

干杯。。！！

相关文章：