1

我使用 ajax 来获取我正在开发的 web 应用程序的主要内容；问题是我想从 jquery ui 实现一些小部件，但这与 ajax 脚本混淆。

我有一个带有#mainContent DIV 的Index.php 页面，其中一旦检索到ajax 回复就会显示。

这是我写的ajax脚本：

$(function() {
    var newHash      = "",
        $mainContent = $("#mainContent"),
        $pageWrap    = $("#contentCenter"),
        $mainMenu = $("#topMenu li a"),
        baseHeight   = 0,
        $el;

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

    $mainMenu.on("click", function() {
        window.location.hash = $(this).attr("href");
        return false;
    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent
                .fadeOut(200, function() {
                    $mainContent.hide(function() {
                        $(".loader").show();
                        var page = newHash;
                        var data = 'page=' + page;
                        $.ajax({
                                url: "main_content/action.php", 
                                type: "POST",       
                                data: data + "&request=ajax",
                                cache: false,
                                success: function (html) {
                                        $mainContent.html(html);
                                        if ($mainContent.find("img").length > 0) {
                                                        $("#mainContent img").on('load', function() {
                                                                $(".loader").hide();
                                                                        $mainContent.fadeIn(200, function() {
                                                                        $pageWrap.animate({
                                                                        height: baseHeight + $mainContent.height() + "px"
                                                                        }, 300);
                                                                    });

                                                            $mainMenu.removeClass('selected');
                                                            $('a[href="' + newHash + '"]').addClass('selected');
                                                            return false


                                                        });
                                        }

                                        else {

                                            $(".loader").hide();
                                                                $mainContent.fadeIn(200, function() {
                                                                $pageWrap.animate({
                                                                height: baseHeight + $mainContent.height() + "px"
                                                                }, 300);
                                                            });

                                                    $mainMenu.removeClass('selected');
                                                    $('a[href="' + newHash + '"]').addClass('selected');
                                                    return false

                                            }   
                                  }
                            });
                    }); 
                });  
        };

    });

    $(window).trigger('hashchange');

});

现在的问题是，如果我在 index.php 页面的顶部包含 jquery ui 脚本，则 ajax 脚本不再起作用，它甚至无法进行调用（用 firebug 检查）。

包含的顺序是：
jquery
jquery ui
all the html
my ajax script

我无法理解 jquery 脚本如何干扰我的脚本。有什么建议么？谢谢

编辑：如果我在需要使用它的加载内容的底部包含 jquery ui 脚本，则 jquery ui 小部件可以工作，而 ajax 只能工作一次（当你到达页面时它会加载内容检查哈希但如果你点击任何菜单项都不起作用）。

4

0 回答 0