jQuery 모바일 전환 충돌 Jquery?

Question

나는 현재 하나 개의 사이트에서 일하고 있어요 : 나는이 작품을 좋아 상업 또는 주거 버튼을 클릭합니다,하지만 당신은 jQuery를에서 "토글"페이지에 서비스를 갈 때 그냥 작동하지 않습니다 지금 http://dlt.tribehosting.com/solution

- 실제로 모든 jQuery 스크립트가 작동을 멈 춥니 다 (홈페이지의 슬라이더와 동일).

페이지가 실제로 다시로드되는 경우 사용자가 다른 링크로 이동하여 모든 것이 손상 될 때까지 모두 양호합니다. 내가 (머리글에서 볼 수있는) 그것을 사용하고있는 것처럼 (문서) .ready 기능과 관련이 있습니다.

이 충돌을 방지하거나 jQuery 토글이 탐색 링크를 통해 방문했을 때 모든 페이지에서 작동하도록하는 방법은 무엇입니까 ??

감사

Answer 1

귀하의 문제는 당신이 가져-로하는 AJAX를 통해 DOM 페이지에 대한 코드를 실행 document.ready를 사용하고 있다는 점이다. 즉, DOM에 추가되는 각 페이지의 이벤트에 바인딩하려는 경우 pageinit 또는 pagecreate을 사용해야합니다.

변경 :

$(function(){ 
    var sidebar = $('.hor-nav'); 
    sidebar.delegate('a.inactive','click',function(){ 
     sidebar.find('.active').toggleClass('active inactive'); 
     $(this).toggleClass('active inactive'); 
    }); 
}); 

하려면 다음 .hor-nav 요소가 항상 존재하지 않는 반면

//run this code when a pseudo-page is added to the DOM 
$(document).delegate('[data-role="page"]', 'pageinit', function(){ 

    //only get the .hor-nav elements in this pseudo-page 
    var $sidebar = $(this).find('.hor-nav'); 

    //no need to delegate here since the elements for this page exist in the DOM now 
    $sidebar.find('a').bind('click',function(){ 
     $sidebar.find('.active').toggleClass('active inactive'); 
     $(this).toggleClass('active inactive'); 
    }); 
}); 

이 항상 DOM (document)에 존재하게됩니다 요소에 이벤트 위임을 사용합니다 DOM이 외부 페이지의 일부인 경우 DOM

document.ready 이벤트에 의존하는 다른 코드가있는 것 같습니다. jQuery Mobile 웹 사이트에는 해당하지 않아야합니다. 이 문서를 보시오 : http://jquerymobile.com/demos/1.1.0/docs/api/events.html (큰 노란색 경고에주의하십시오)