전체 DIV 클릭 가능 자식 링크를 개별 DIV로 만들려면 어떻게해야합니까?

Question

내가 여기이 질문에 전구체를 질문 : 나는 아래의 첫 번째 스크립트를 제거 한 후, 그 다음 Click link in DIV and show PHP/HTML in separate DIV

, 나는 두 번째 스크립트가 작동시킬 수 있었다. 나는 내 질문을 수정했으나 침묵 한 것으로 보인다. 그래서 약간 수정 된 질문이 있습니다.

아래의 2 가지 스크립트 사이에 어떤 충돌이 있으며 어떻게 작동시킬 수 있습니까? 기본적으로 나는 DIV (".side_items")의 아무 곳이나 클릭 할 수 있도록하려면 별도의 DIV ("#main_content")

자바 스크립트에서 열린 자식 앵커 링크가 있습니다

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".side_items").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
    }) 
}); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $(".side_items a").click(function(e){ 
    e.preventDefault(); 
     $("#main_content").load($(this).attr("href")); 
    }); 
}); 

</script> 

HTML을 : (약간 단순화)

<div id="main_content"> 
</div> 

<div id="right_side"> 
    <div class="side_items"> 
    <a href="content.html"> 
    <img src="images/examplethumb.png" /><br /> 
    Content</a> 
    </div> 
</div> 

두 스크립트는 개별적인 원하는 결과를 얻기 위해 독립적으로 작동합니다. 그것을 부셔

$(document).ready(function(){ 
    $(".side_items").click(function(){ 
     $("#main_content").load($(this).find("a").attr("href")); 
     return false; 
    }) 
}); 

:

Answer 1

이 그것을 할 것입니다

$(".side_items").click(fn); 

는 side_items의 클래스와 모든 요소를 ​​찾아 그들에게 클릭 이벤트 처리기 ( fn)를 할당합니다. 이러한 요소 중 하나를 클릭 할 때마다 fn이 요소의 컨텍스트로 실행됩니다. 삭제 된 코드에서 선택기 .side_items a을 사용하고 있었는데, 이는 클릭 핸들러가 div 자체가 아닌 div 내부의 링크에만 바인딩된다는 것을 의미했습니다.

$(this).find("a").attr("href") 

현재 요소 ( this) 내에 포함 된 모든 링크를 찾아 볼 수있는 첫 번째 요소에서 href 속성의 값을 얻는다. 버려진 코드에서 컨텍스트 ( this)는 링크였습니다. 우리의 핸들러는 이제 div를 포함하고 있기 때문에 컨텍스트는 div이기도합니다. 링크를 찾으려면 찾으셔야합니다.

$("#main_content").load(href); 

그것으로 href에서 발견 된 내용을 main_content의 ID를 가진 요소를 찾아로드합니다. 버려진 코드에서는 페이지가 멀리 이동하도록 location.href을 설정했습니다.

Answer 2

당신의 문제는 당신이 $(). ready (..) 처리기를 두 번 할당하려고한다는 것입니다.