JQuery와는

Question

전화 CSTE 연구진은 다른 후 작동하지 CSTE 연구진은 내가 다음 JQuery와 스크립트가 : 나는 목록을 클릭하면

이

<div id="menu-div"> 
<div id="top-menu"> 
<h3 id="top-tabs"><a href="contentColumn.html" class="change-menu">Contents</a></h3> 
<h3 id="top-tabs"><a href="indexColumn.html" class="change-menu">Index</a></h3> 
<h3 id="top-tabs"><a href="searchColumn.html" class="change-menu">Search</a></h3> 
</div> 
<div id="menu-change-div"> 
<ul> 
//Lots of nested list items and ul's with #change-content id 
</ul> 
</div> 
</div> 

<div id="content"> 
<div id = "page-content"> 
//content section 
</div> 
</div> 

첫 번째 함수가 발생 여기

$(function(){ 
$('#top-menu').on('click', 'a.change-menu', function(e){ 
e.preventDefault() 
$("#menu-change-div").load($(this).attr("href")); 

}); 
}); 

$(function(){ 
$('#menu-change-div').on('click', 'a.change-content', function(e){  
e.preventDefault() 
$("#content").load($(this).attr("href"));  
}); 
}); 

은 신체 내부의 HTML의 항목을 내 메뉴 div에 넣고 html 파일을 내 콘텐츠 div에로드합니다.

다른 탭을 선택하면 내 메뉴 div에서 whats가 변경됩니다.

목록 항목을 클릭하면 모든 항목이 예상대로 작동하며 탭을 클릭해도 제대로 작동합니다. 처음으로 목록 항목을 클릭 한 다음 탭을 클릭하고 다른 목록 항목을 클릭하면 내 문제가 발생합니다. 첫 번째 클릭과 마찬가지로 div에 html을로드하는 대신 href 다음에 다른 창에서 열립니다. 내가 뭘 잘못하고 있는거야?

Answer 1

시도 : 요소를 동적으로 추가되는 경우

가

$(function() { 
    $('body').on('click', 'a.change-content', function(e) { 
     e.preventDefault() 
     $("#content").load($(this).attr("href")); 
     return false; 
    }); 
    $('body').on('click', 'a.change-menu', function(e) { 
     e.preventDefault() 
     $("#menu-change-div").load($(this).attr("href")); 
    }); 
});​ 

, 당신은 당신이 CSTE 연구진 사용하고있는 방법을 변경해야합니다(). docs 당

:

이벤트 핸들러는 현재 선택된 요소에 바인딩; 코드가 .on()을 호출 할 때 페이지에 이 있어야합니다. 요소가 있는지 그리고 선택할 수 있는지 확인하려면 페이지의 HTML 태그에있는 요소의 문서 준비 처리기 내에서 이벤트 바인딩을 수행하십시오. 새 HTML이 페이지에 삽입되는 경우 새 HTML이 인 페이지가 삽입 된 후에 요소를 선택하고 이벤트 처리기를 연결하십시오. 또는 위임 된 이벤트를 사용하여 다음에 설명 된대로 이벤트를 첨부하십시오.

두 개의 $(function() {...})을 하나로 결합 할 수 있습니다.

Answer 2

두 번째 것은 다른 탭이 인 경우 내 메뉴 div의 내용을 변경합니다.

그런 다음 기회는 당신이 DOM에 머물 것입니다 상위 요소에 두 번째 click 이벤트 핸들러를 위임 할 필요가 있습니다. 당신은 on 방법에 선택기를 통과하여이 작업을 수행 할 수 있습니다 : 당신이 a.change-menu에 의해 참조되는 요소, 이벤트 처리기가 더 이상 존재 구속되지 않았다되는 요소를 변경할 때 (새로운 요소는 '돈 때문에

$("#someAncestor").on("click", "a.change-menu", function(e) { 
    //Do stuff 
}); 

입니다 자동으로 이벤트 핸들러를 바인딩합니다.

이벤트 핸들러를 상위 DOM 트리에 위임함으로써 대부분의 DOM 이벤트가 트리 위쪽으로 튀어 나오고 조상 요소에서 해당 이벤트를 수신한다는 사실을 이용합니다. 이벤트 대상이 on에 전달 된 선택기와 일치하면 이벤트 처리기가 실행됩니다.

Answer 3

.on() 메소드는 이미있는 DOM 요소에서 수신 대기합니다. 새로운 요소를 추가하면 해당 요소가 수신되지 않습니다. 후자의 요소 (예 : .load()를 사용하여 추가 된 요소)를 청취해야하는 경우 .live() 메서드를 사용하십시오.