Javascript 如何在.load（）中包含.ready（）函数

在我的网站上，我使用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而不是$（document）时，才可以使脚本onReady加载？

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

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

希望这对你有帮助。

---

Cheers

您可以使用jQuery的.on（）方法在doc ready函数中为动态创建的内容添加事件，这将避免您在每次加载函数调用时都必须附加侦听器

我找到了解决方案，我通过以下方法删除了代码onReady.js：

this.tabHeight = function () {

    codes......

};

window.onload = tabHeight;

在.load（）中，我这样称呼它：

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

---

事实上，我只是复制了它的方式。

对您的问题的回答可能会更改您的所有代码。。。你应该考虑这样一个事实，“只有主要内容才会改变”。因此，您的所有脚本都已加载，on处理程序已设置，并且document.ready不会再次启动，因为它只是已更新文档的一部分。你必须使用load回调来“更新你的高度”，就像onReady.js应该做的那样。谢谢你的回答，但很抱歉，我不确定我是否理解，我想代码已经通过使用getscript在load回调函数中了。如果您想直接使用onReady.js中的代码替换getscript。我已经试过了，但是没有用。谢谢你的回答。我按照那里的说明，把代码放在页面的页眉上，并试图在页眉和更改内容中调用函数，但是代码只有第一次才起作用。谢谢你的回答，我试着重新放置。单击函数by

$（'#…）。打开（“单击”，函数（e）{}）并将它们放在标题中的.ready中。但这并没有改变任何事情。它也将仅第一次被调用。尝试调用动态内容的容器并将元素设置为目标：
$（'.container'）。在（'click'，'#…'，function（e）{}）上这将表现为委托…应该适合您