0

私はこのコードを持っています：

<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にコンテンツをロードします。ただし、2番目のリンク（Gmail）をクリックしても機能しません。

誰かが私がこの行動を理解するのを手伝ってくれる？

4

2 に答える 2

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をロードするために使用することはできないため、これは機能しません。これは同一生成元ポリシーと呼ばれます。

于 2012-07-24T18:53:24.030 に答える
1

ドキュメントにはそのIDを持つ要素が1つしかないため、JQueryは指定した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>
于 2012-07-24T18:53:36.823 に答える