解决Jquery $("#main").html($("#main").html()+data);在Firefox中无效

来源：互联网发布：淘宝买蔬菜种子编辑：程序博客网时间：2024/06/08 05:44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Ecsoft</title><link href="1.css" type="text/css" rel="stylesheet"><style type="text/css"></style><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript">$(function(){    //点击navigate:Demo，在左侧栏的div中显示$("#demo").click(function(){$(".demo-link").css("display","block");});});//点击左侧栏的链接,在右边的main DIV中显示外部HTML的内容function getContent(url,id){//alert(url);//alert(id);$("#main").text("");//加载显示内容前，清除上一次加载的内容////注释掉$(id).click(function(){})事件,是因为已经在下面的<a>中绑定了哦你click事件了.说明:不注释在IE中正常,FF中就不能执行此函数了.    //$(id).click(function(){//alert("hh");$.ajax({        type:"get",        url:url,dataType:"html",//如果不指定dataType，在IE中会默认为返回是HTML，但是在FF中默认为XMLDocument:[object XMLDocument]        success:function(data){alert(data);        $("#main").html($("#main").html()+data);        },          error: function(){          alert("加载失败！");          }        });//});}</script></head><body><div id="container"><div id="globallink"><ul><li><a id="demo" href="#">Demo</a></li><li><a href="#">nav2</a></li><li><a href="#">nav3</a></li><li><a href="#">nav4</a></li><li><a href="#">nav5</a></li><li><a href="#">nav6</a></li></ul><br></div><div id="parameter"><div id="lcategory"><h4 class="demo-link" id="category"><span>Demo</span></h4><ul><li class="demo-link"><a id="navigate-link" href="#" onclick="getContent('a.html','#navigate-link');return false;">Navigate</a></li><li class="demo-link"><a id="button-link" href="#" onclick="getContent('button.html','#button-link');return false;">Button</a></li><li class="demo-link"><a id="table-link" href="#" onclick="getContent('a.html','#table-link');return false;">Table</a></li><li class="demo-link"><a href="#">Ajax学习心得</a></li><li class="demo-link"><a href="#">新疆甘肃游记</a></li><li class="demo-link"><a href="#">学生节</a></li><li class="demo-link"><a href="#">职业生涯</a></li></ul><br></div><div id="llatest"><h4 class="latest"><span>最新文章列表</span></h4><ul><li><a href="#">又是一年银杏黄</a></li><li><a href="#">迎新小记</a></li>                <li><a href="#">beep饭局</a></li><li><a href="#">夜访中戏小记</a></li><li><a href="#">植物园看郁金香</a></li><li><a href="#">玉渊潭看花</a></li><li><a href="#">学校的春天</a></li><li><a href="#">美术馆小记</a></li><li><a href="#">巧学巧用Flash</a></li></ul><br></div></div><div id="main">    </div><div id="footer"><p>更新时间: 2008-06-24 ?All Rights Reserved </p></div></div></body></html>

解决方法：见以上代码的注释部分！

在$.ajax({})方法中指定dataType，服务器返回数据的类型：

dataType:"html",//如果不指定dataType，在IE中会默认为返回是HTML，但是在FF中默认为XMLDocument:[objectXMLDocument]

FF显示1: 没有指定dataType之前

FF显示2:指定了dataType之后