php - 加载 AJAX 后解释 javascript 代码

Question

所以我有一个 index.php 页面使用 ajax 在 div“容器”中加载内容我的问题是我的一个 html 包含中有一部分 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/查看它的来源，它从http://brozeus.xyz/body.php加载内容动态页面内部和内部的javascript代码http://brozeus.xyz/body.php也在通过 .append() 函数附加数据后运行。所以看看 http://brozeus.xyz/body.php 的来源也是。