在jQuery中，我们通过ajax的方法获取另一个页面内的数据，使用这些数据作为本页面的局部内容。可是在获取远端HTML数据时，有时我们发现jQuery选择器失效，这是什么原因呢？

我们来看一下jQuery中的ajax方法的基本结构：

[code lang="javascript" line="1"]

$.ajax({

type : 'GET',

url : 'http://' + $domain + '/aoyun/index.html',

dataType : 'html',

beforeSend : function(){

$myTip.text('加载中...');

},

success : function(data){

var $china = {},$chinaData = $(data).find('#forChina table tr.bg td');

$china.jin = $chinaData.eq(1).text();

$china.yin = $chinaData.eq(2).text();

$china.tong = $chinaData.eq(3).text();

$myTip.html('中国：金' + $china.jin + ' 银' + $china.yin + ' 铜' + $china.tong + '');

},

error : function(XMLHttpRequest, textStatus, errorThrown){

//alert(XMLHttpRequest.readyState);

}

});

[/code]

我们关心的是success:function(data)部分。其中返回的data决定着我们这个问题的成败。我们来对比以下两段返回值：

[code lang="php" line="1"]

.....

...

...

[/code]

在这一段中，我们将#myWant直接放置在body内，再来看下一段

[code lang="php" line="1"]

...

...

...

[/code]

而在这一段中，我们将#myWant放置在#container内。这两段的区别就在于，我们在ajax的success中用$(data).fin('#myWant')是否可以取到数据，第一段取不到，第二段可以取到。

jQuery中ajax的逻辑就是

以外及其直接子节点都是不可被选取的，在success:function(data)中，data为返回的DOM，而利用$(data).find()进行查找时，文档内容(内)的根是不可被选择的。再举一个例子：我们有时直接返回一段HTML代码，如下

[code lang="php" line="1"]

MY TITLE

CONTENT

[/code]

如果直接用$(data) .find('li')就无法获取，而找find('#title')则可取。

所以下一次记得在你的数据被请求页面外套上一个