페이지가 DOM에 보관 될 때 on/off를 사용하여 Jquery-Mobile에서 이벤트를 올바르게 언 바인드하는 방법은 무엇입니까?

Question

탐색 할 때 Jquery Mobile이 DOM에 일부 페이지를 유지하므로 앞뒤로 이동할 때 페이지가 여러 번 방문 될 수 있습니다.

나는 아래와 "중첩 된 요소 바인딩을"포함이 바인딩을 수행하는 모든 내 페이지 로직, 내부 같은 페이지에 결합하고있어 경우

// listener for the page to show: 
$(document).on('pagebeforeshow.register', '#register', function() { 

    // stuff 

    // page event bindings: 
    $(document).on('click.register', '.registerSubmitter', function(e) { 
     // do something 
     }); 
    }); 

돌아 간다 이리저리 내 결합 중첩되어 원인을 첨부합니다 여러 번.

지금과 같이이 문제를 해결하려고 (... 작동하지 않습니다) : 그래서 첫 번째 바인딩이 통과 할 수 있도록하고있어

$(document).on('click', '.registrySubmitter', function(e) { 

     if ($(this).attr('val') != true) { 
      $(this).attr('val') == true; 
      // do something 
      } 
    }); 

을하고 나는 다른 모든 바인딩 시도를 차단하는 함께 따라옵니다.

이 방법이 효과가있는 것은 아니지만 최적의 방법은 아닙니다.

질문 :
방법과 이벤트 바인딩이 제대로 언 바운드해야/Off 양식이? 일반적인 방법 (모두 죽이기) 또는 바인딩마다이 바인딩을 수행해야합니까? 더 중요한 것은 더 중요합니다. 사용자가 페이지를 방문하거나 페이지를 떠날 때 바인딩을 한 번 수행 한 상태로 유지하거나 바인드/바인딩 해제하는 것이 성능면에서 현명한 방법입니까?

감사합니다.

편집 :
그래서 내가 지금처럼 pageHide을 수신 한 후 내 모든 이벤트의 네임 및 해요 : 나는 사용자 정의 대화 상자를 닫습니다 어느 때

$(document).on('pagehide.register', '#register', function(){ 
    $(document).off('.registryEvents'); 
    }); 

을이 바인딩을 해제하는 것 같지만, 그것은 또한 화재/페이지에서 selectmenu를 클릭하면 페이지를 떠나기 전에 제 바인딩을 잃어 버릴 수 있습니다. 그래서 부분적인 대답, 나는 off()를 사용해야하지만, 실제로 왼쪽에있는 페이지에 바인드하는 방법과 select 메뉴를 열고 닫는 방법은 무엇입니까?

Answer 1

.on()과 같이 사용하면 document 요소에 이벤트 처리를 위임합니다. 즉, document 요소를 항상 사용할 수 있기 때문에 언제든지 위임 된 이벤트 바인딩을 설정할 수 있습니다.

나는이 개 제안이있어 :

• 만 사용 페이지가 DOM에 추가 초기화 페이지 별 바인딩을 실행하는 pageinit 또는 pagecreate 이벤트를. 그들이 화재 때 때문에이 pageinit 또는 pagecreate 이벤트 핸들러 내에서 이벤트 바인딩을 위임 할 것이다이 방법을 사용하여 의사 페이지의 모든 요소는 DOM에 있습니다

.

$(document).on('pageinit', '#register', function() { 
    //note that `this` refers to the `#register` element 
    $(this).find('.registerSubmitter').on('click', function(e) { 
     // do something 
    }); 
}); 

• 바인딩은 한 번 이벤트 핸들러 위임 및 페이지가 DOM에 실제로있는 경우에 대해 걱정하지 마십시오 :

.

//this can be run in the global scope 
$(document).on('click.register', '.registerSubmitter', function(e) { 
    // do something 
}); 

당신처럼 당신이 위임을 사용하여 이벤트를 바인딩 할 때 기본적으로 이벤트 핸들러를 추가하는 실제 CPU 히트 덜하지만 때마다 이벤트가 (거품 어떤 종류의) 전달되고이 경우 확인해야합니다 위임 된 이벤트 핸들러의 선택기와 일치합니다.

요소에 직접 바인딩하는 경우 일반적으로 이벤트 위임과 같이 document 요소에 한 번 바인딩하지 않고 각 요소를 바인딩해야하기 때문에 실제 바인딩을 수행하는 데 더 많은 시간이 걸립니다. 그러나 특정 요소가 특정 이벤트를 수신하지 않는 한 코드가 실행되지 않는 이점이 있습니다.

문서에서 빠른 추천 광고 : 초기화가 발생한 후 페이지에 트리거이

, 초기화된다. 은 페이지가 직접로드되는지 여부 또는 콘텐츠가 Ajax 탐색 시스템의 일부로 다른 페이지로 가져온 경우에도 DOM ready() 대신이 이벤트에 바인딩하는 것이 좋습니다.

출처 : http://jquerymobile.com/demos/1.1.0/docs/api/events.html