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那么它将无法正常工作了。就好像我第一次加载页面时，脚本会起作用。虽然tablcloth（）和domtab（）适用于每个页面。

在每页的头部我都有

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

但我认为它没有任何意义。

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

Answer 1

而不是$（document）.ready你可以使用函数pageLoad（）{}。

ScriptManager会在页面上自动调用它，即使是在回发中也是如此。

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

希望这会对你有所帮助。干杯

Answer 2

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

Answer 3

我找到了解决方案，我通过以下方式重新编写了onReady.js代码：

this.tabHeight = function () {

    codes......

};

window.onload = tabHeight;

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

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

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

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

3 个答案: