javascript - 如何在 .load() 中包含 .ready() 函数

Question

在我的网站上，我使用 jquery 脚本使我的网站动态化(网站的大部分内容一次收费，当您浏览时，只有主要内容会发生变化)。它使用 .load() 。不幸的是，此函数往往会否定由动态容器调用的任何 javascript/Jquery 代码。所以我必须在加载期间调用它们。这是脚本代码:

$(function () {

if (Modernizr.history) {

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function () {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);

        return false;
    });

    function loadContent(href) {
        $mainContent
                .find("#guts")
                .fadeOut(200, function () {
                    $mainContent.hide().load(href + " #guts", function () {

                    // I call the script here.

                        $.getScript('tablecloth/tablecloth.js', function () {
                            tablecloth();
                        });

                        $.getScript('js/domtab.js', function () {
                            domtab.init();
                        });

                        // This one is the one which doesn't work.
                        $.getScript('js/onReady.js', function () {
                        });

                        $mainContent.fadeIn(200, function () {
                            $pageWrap.animate({
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                        $("nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$=" + href + "]").addClass("current");





                    });
                });
    }

    $(window).bind('popstate', function () {
        _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
        loadContent(_link);


    });

} // otherwise, history is not supported, so nothing fancy here.


});

我有一个页面脚本，它使用 .click() 函数，onReady.js:

$(document).ready( function() {
var maxHeight = document.getElementById("flip1").scrollHeight;
var maxHeight2 = document.getElementById("fli1A").scrollHeight;

var parent = document.getElementById("flip-container");
var DivContainerHeight = $('#text1').scrollHeight;

$("#text_var").html(maxHeight2);
//alert(DivContainerHeight);
//document.getElementById('tooltip6').style.display = 'block';
document.getElementById('global').style.height = DivContainerHeight + 'px';
//$("#flip-tabs").css({ height: maxHeight+'px' });
$("#flip-tabs").css({
    'height': maxHeight2 + 'px'
    //'height': '1300px'
});



$('#fl1A').on("click", function (e) {
    $("#fli1A").show();
    var maxHeight2 = document.getElementById("fli1A").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

$('#fl1B').on("click", function (e) {
    $("#fli1B").show();
    var maxHeight2 = document.getElementById("fli1B").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

$('#fl2A').on("click", function (e) {
    $("#fli2A").show();
    var maxHeight2 = document.getElementById("fli2A").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

$('#fl2B').on("click", function (e) {
    $("#fli2B").show();
    var maxHeight2 = document.getElementById("fli2B").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

$('#fl3A').on("click", function (e) {
    $("#fli3A").show();
    var maxHeight2 = document.getElementById("fli3A").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

$('#fl3B').on("click", function (e) {
    $("#fli3B").show();
    var maxHeight2 = document.getElementById("fli3B").scrollHeight;
    //alert("New height: " + maxHeight2);
    $("#text_var").html(maxHeight2);
    $("#flip-tabs").css({
        'height': maxHeight2 + 'px'
        //'height': '1000px'
    });
});

});

当我第一次直接加载代码时，代码可以正常工作，我使用此代码的页面(A.html)，但是如果我加载另一个页面然后再次转到 A.html，它将无法工作了。好像 getscript 会在我第一次加载页面时起作用。尽管 tablcloth() 和 domtab() 对每个页面都能正常工作。

在我的每一页的头部

 <script type ="text/javascript" src="js/onReady.js"></script> 

但我不认为它有任何目的。

另一个问题是只有当我加载页面 A.html 时才可以使脚本 onReady 加载吗？

Answer 1

您可以使用函数 pageLoad(){} 而不是 $(document).ready。

它由页面上的 ScriptManager 自动调用，甚至在回发时也是如此。

我认为这是你的问题，你的更改不会在回发时受到影响。

希望对您有所帮助。干杯