jquery - ajaxの動的生成コンテンツに関するjquery uiの問題

Question

作業中の Web アプリのメイン コンテンツを取得するために ajax を使用します。問題は、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');

});

ここでの問題は、jquery ui スクリプトを index.php ページの上部に含めると、ajax スクリプトが機能しなくなり、呼び出しすら行われないことです (firebug で確認)。

インクルードの順序は次のとおりです。
jquery
jquery ui
all the html
my ajax script

jquery スクリプトがどのようにスクリプトに干渉するのか理解できません。助言がありますか？ありがとう

編集: jquery ui スクリプトを使用する必要がある読み込み済みコンテンツの下部に含めると、jquery ui ウィジェットが機能し、ajax は 1 回だけ機能します (ページに到達したときにハッシュをチェックするコンテンツを読み込みますが、どのメニューエントリも機能しません)。