Question

我目前正在设计一个基于ajax的导航网站。我遇到的问题是当我尝试在动态加载的内容上运行jquery时它不起作用。

这是我做的：

的index.html

<html>
<head>
    <title>Testing Dynamic Content</title>
    <link href="style.css" rel="stylesheet"/>
    <script src="http://localhost/jquery.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div class="main">
        <div class="content">
            <ul class="list">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </div>
    </div>
    <script>
    $('.list').greenify();
    </script>
</body>
</html>

2.HTML

<html>
<head>
    <title>Testing Dynamic Content</title>
    <link href="style.css" rel="stylesheet"/>
    <script src="http://localhost/jquery.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div class="main">
        <div class="content">
            <span id="hello">Content</span>
        </div>
    </div>
    <script>
    $('#hello').on('click',function(){
        $('.main').load('index.html .content');
        $('.list').greenify();
    });

    </script>
</body>
</html>

的style.css

.list{
    color:#f00;
}

main.js

$.fn.greenify = function() {
    this.css( "color", "red" );
};

问题出在 $（'list'）。greenify（）; 。当我使用.load（）在2.html上加载index.html的内容时，内容加载为css中定义的红色。当我在这个加载的内容上运行$（'list'）。greenify（）时，它不起作用。

如何运行mak，这会在动态加载的内容上运行JavaScript？

我需要这样做才能在动态加载的网页上运行幻灯片。幻灯片显示无效。

Answer 1

问题是您的代码在页面成功加载之前运行，将代码移动到文档就绪事件：

$(document).ready(function(){
   $('.list').greenify();
})

并且jQuery加载是异步，您需要在成功函数中运行您的javascript

$('.main').load('index.html .content', function() {
    //will execute when load successfully
    $('.list').greenify();
});

Answer 2

您应该绑定这样的事件，然后只有您的脚本会影响动态DOM元素

 $('body').on('click','#hello',function(){
        $('.main').load('index.html .content');
        $('.list').greenify();
});

在基于ajax的网站的动态加载内容上运行javascript

2 个答案:

您应该绑定这样的事件，然后只有您的脚本会影响动态DOM元素