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

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() 时，它不起作用。

我怎样才能让这个碰巧在动态加载的内容上运行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

Run javascript on dynamically loaded content for ajax based website

html

javascript

ajax

jquery

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