jQuery的负载一旦

Question

我有这样的代码：

<script> 
$(document).ready(function() { 
    $('#lnk').click(function(e) { 
     e.preventDefault(); 
     url = $(this).attr('href'); 
     $("#content").load(this.href); 
    }); 

}); 
</script> 

<a href="http://google.com" id="lnk">Google</a> 
<a href="http://gmail.com" id="lnk">Gmail</a> 
<div id="content"> 

</div> 

当我点击第一个链接（谷歌），它的工作原理和加载内容，以我的内容股利。但是，当我点击第二个链接（gmail）时，它不起作用。

任何人都可以帮助我理解这种行为吗？

Answer 1

ID是唯一的，你不能有多个具有相同ID的元素（$('#lnk')将得到第一个元素）。使用类代替

<script> 
$(document).ready(function() { 
    $('.lnk').click(function(e) { 
     e.preventDefault(); 
     $("#content").load(this.href); 
    }); 

}); 
</script> 

<a href="http://google.com" class="lnk">Google</a> 
<a href="http://gmail.com" class="lnk">Gmail</a> 

此外，这是行不通的，因为你不能使用.load加载任意URL。这就是所谓的same origin policy。

Answer 2

JQuery将事件附加到具有您指定ID的第一件事上，因为文档应该只有一个具有该ID的元素。试试这个：

<script> 
$(document).ready(function() { 
    $('.lnk').on('click', function(e) { 
     e.preventDefault(); 
     $("#content").load(this.href); 
    }); 

}); 
</script> 

<a href="http://google.com" class="lnk">Google</a> 
<a href="http://gmail.com" class="lnk">Gmail</a> 
<div id="content"> 

</div>