我使用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
所有的HTML
我的ajax脚本
我无法理解jquery脚本如何干扰我的脚本。 有什么建议? 感谢
编辑:如果我在加载内容的底部包含jquery ui脚本,我需要使用它,jquery ui小部件可以工作,而ajax只能工作一次(当你到达页面时,它加载检查哈希的内容但是如果你点击任何菜单条目它将无法正常工作。)