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>

当我点击第一个链接（谷歌）时，它可以工作并将内容加载到我的内容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加载任意网址。这叫做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>

jquery加载一次

2 个答案: