jquery - 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>

当我单击第一个链接（谷歌）时，它可以工作并将内容加载到我的内容 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。这就是所谓的同源策略。

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>