jQuery Mobile : 페이지 변경 후 탐색이 열리지 않습니다.

Question

내 jQuery Mobile 프로젝트에서 토글 아이콘이있는 #sidebar 요소가 있습니다. 내 기본 파일에서

, 그냥 내가 다음 코드를 사용 #sidebar의 DIV 미만 :

<a href="javascript:void(0)" id="toggle-sidebar">Toggle sidebar</a> 
<div id="sidebar"> ... </div> 

$('#toggle-sidebar').on('click', function() { 
    $('#sidebar').toggleClass('visible'); 
}); 

때 처음으로 내 페이지가로드, 전환 작업이 완벽하게 정상적으로. 그러나 내 메인 탐색을 통해 페이지를 변경할 때 토글 링이 더 이상 작동하지 않습니다. 나는 click 기능 내부에 경고를하고 페이지가 변경된 후 경고가 여러 번 실행된다는 것을 깨달았습니다.

브라우저에서 URL을 입력하고 페이지를로드하여 다른 페이지로 이동할 때 토글 링이 다시 작동합니다.

이 문제를 어떻게 해결할 수 있습니까?

Answer 1

페이지를 변경 한 후 클릭시 경고가 여러 번 실행되는 경우 모든 페이지 변경시 새로운 클릭 이벤트 수신기가 바인딩되어 있음을 제안 할 수 있습니다. 이러한 상황을 피하기 위해 클릭 리스너를 바인딩하기 전에 해당 요소에서 클릭 이벤트 리스너의 바인딩을 해제하십시오. 그런 식으로 :

$('#toggle-sidebar').off('click'); 
$('#toggle-sidebar').on('click', function() { 
    $('#sidebar').toggleClass('visible'); 
}); 

문제가 해결 될 수 있습니다.

또한 jQuery 이벤트 네임 스페이스 https://api.jquery.com/event.namespace/을 살펴볼 수도 있습니다. 그리고 네임 스페이스를 클릭 이벤트에 추가하면 언젠가 코드에 나타날 수있는 해당 요소의 다른 클릭 이벤트가 언 바인드되지 않습니다.