解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the...

解决关于jquery中$.get()方法总是报“HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy”错的方法

  今天在看《jquery基础教程(第三版)》第十章的时候,运行随书下载的源码时总是不成功。起初以为书中自带的JS文件有错呢,但是测来测去也没发现哪里有问题。现在把源码附下:

1、这是书中带的HTML文件,其余的忽略不计,关键的就是下面这个a。

<a id="more-photos" href="pages/1.html">More Photos</a>

2、对应的JS文件如下(注意其中关键方法为$.get()):

复制代码
 1 $(document).ready(function() {
 2   var pageNum = 1;  3 $('#more-photos').click(function() {  4 var $link = $(this);  5 var url = $link.attr('href');  6 if (url) {  7 $.get(url, function(data) {  8 $('#gallery').append(data);  9  }); 10 pageNum++; 11 if (pageNum < 20) { 12 $link.attr('href', 'pages/' + pageNum + '.html'); 13  } 14 else { 15  $link.remove(); 16  } 17  } 18 return false; 19  }); 20 });
复制代码

 

3、错误。以上看起来似乎没有问题,但是在火狐和Chrome下测试都报错,其中火狐debug错误如下:

  整个一章的代码都是这样,但是测试在IE里没有问题。于是谷歌、百度各种乱搜一翻,貌似网上发生这样问题的还不在少数,但是搜来搜去各种回答都 有。一一试了下,发现其中的以为大哥的方法貌似正确,于是查了下jquery api,原来是问题出在$.get()方法上,书中的源码在使用这个方法的时候都没有指定这个方法的type参数,即jQuery.get(url, [data], [callback], [type])第四个参数。加上第四个参数‘html’以后就显示正常了。Okay了!灰常happy!现在运行OK了,已经没有错误了。

  具体方法如下:

  在上面的JS文件中的第7行$.get()方法上增加一个type参数即可,如下(注意第9行增加了一个‘html’的type参数):

复制代码
 1 $(document).ready(function() {
 2   var pageNum = 1;  3 $('#more-photos').click(function() {  4 var $link = $(this);  5 var url = $link.attr('href');  6 if (url) {  7 $.get(url, function(data) {  8 $('#gallery').append(data);  9 },'html'); 10 pageNum++; 11 if (pageNum < 20) { 12 $link.attr('href', 'pages/' + pageNum + '.html'); 13  } 14 else { 15  $link.remove(); 16  } 17  } 18 return false; 19  }); 20 });
复制代码

  由于是新手,也只找到了怎么解决这个问题,但是没有找到为什么会出现这样的问题。以后使用$.ajax()\$.get()等这几个方法的需要注意一下子了。

  参考:http://blog.sina.com.cn/s/blog_995c1f630101a36l.html(这位大哥的错误发生在$.ajax()方法上)

转载于:https://www.cnblogs.com/xuxiaoshuan/p/4210385.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值