加载AJAX后解释javascript代码

时间:2015-12-25 02:52:42

标签: php jquery ajax request

所以我有一个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);
    })
}

1 个答案:

答案 0 :(得分:0)

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

首先在容器div之前加载jquery。并确保动态加载的数据具有$(document).ready内的javascript代码。

在这里查看我的网站我做了同样的事情http://brozeus.xyz/查看其来源,它会动态加载页面内http://brozeus.xyz/body.php的内容,http://brozeus.xyz/body.php内的javascript代码也会运行通过.append()函数附加数据后。因此,请查看http://brozeus.xyz/body.php的来源。