加载 AJAX 后解释 javascript 代码

Question

所以我在 div "container" 和 ajax 中有一个 index.php 页面加载内容我的问题是我的 html include 中包含 javascript 的一部分。当我发出 ajax 请求时它不工作，我得到了我的内容但不是 js 如何修复它以在加载 ajax 后解释 javascript？所以这是 php 请求：

<div id="container">
    <?php
    $d = "container/";
    if (isset($_GET['p'])) {
        $p = strtolower($_GET['p']);
        if (preg_match("/^[a-z0-9\-]+$/", $p) && file_exists($d . $p . ".html")) {
            include $d . $p . ".html";
        } else {
            include "pages/404.html";
        }
    } else {
        include "pages/index.html";
    }
    ?>
</div>
<script src="js/main.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/ajax.js"></script>

这里是我的 index.html 页面：

<div class="section vs-section" data-speed="0.4">
    <div class="vs-transform" data-speed="0.5">
        <div class="overlay"></div>
    </div>
</div>

<script>
    var DOMReady = function (a, b, c) {
        b = document, c = 'addEventListener';
        b[c] ? b[c]('DOMContentLoaded', a) : window.attachEvent('onload', a)
    }
    DOMReady(function () {

        var section = document.querySelector('.vs-section');
        var divs = document.querySelectorAll('.vs-transform');

        var smooth = new Smooth({
            direction: 'horizontal',
            section: section,
            ease: 0.1,
            els: divs
        });
        smooth.init();
    });
</script>

最后是我的 ajax:

$(document).ready(function () {
    $("#menu a").click(function () {
        $("#top").append('<div class="loader"></div>'); // On ajoute le loader en haut
        page = $(this).attr("href");
        $.ajax({
            url: "pages/" + page,
            cache: false,
            success: function (html) {
                afficher(html);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                afficher("erreur lors du chagement de la page");
            }
        })
        return false;
    });
});

function afficher(data) {
    $(".loader").remove(); // On supprime le loader
    $("#container").fadeOut(500, function () {
        $("#container").empty();
        $("#container").append(data);
        $("#container").fadeIn(1000);
    })
}

Answer 1

我的网站上有类似类型的代码。诀窍是将正在加载的 javascript 代码放在 $(document).ready 中。您可以在同一个页面上有多个 $(document).ready，这样就不成问题了。

所以首先在容器 div 之前加载 jquery。并确保正在动态加载的数据在 $(document).ready.

中包含 javascript 代码

看看我的网站，我也做了同样的事情 http://brozeus.xyz/ Look at its source, it loads the content from http://brozeus.xyz/body.php inside the page dynamically and the javascript code inside http://brozeus.xyz/body.php also runs after data is apppended via .append() function. So have a look at source of http://brozeus.xyz/body.php。

加载 AJAX 后解释 javascript 代码

Interpret javascript code after loading AJAX

php

ajax

jquery

request