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')은 첫 번째 요소를 가져옵니다). 당신이 임의의 URL을로드 할 수 .load을 사용할 수 없습니다로 사용 클래스 대신

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

또한,이 작동하지 않습니다. 그 이름은 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>