0

在我的网站上，我使用 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 加载？

4

3 回答 3

0

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

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

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

希望这对您有所帮助。干杯

于 2013-07-16T03:56:47.563 回答
0

我找到了我用这个替换代码 onReady.js 的解决方案：

this.tabHeight = function () {

    codes......

};

window.onload = tabHeight;

在 .load() 我这样称呼它：

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

事实上，我只是复制了桌布的做法。

于 2013-07-16T04:46:05.710 回答
0

您可以使用 jQuery 的 .on() 方法在 doc ready 函数中为动态创建的内容添加事件http://api.jquery.com/on/这将防止您必须在每个加载函数调用上附加侦听器

于 2013-07-16T04:07:39.430 回答