JQuery Mobile: inline data-role = "page" javascript jest zachowywany po wydaniu strony z DOM?

Question

Stosując tę ​​rozmowę <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a> uzyskać następującą stronę dialogowe:

<div data-role="page" id="deleteCompanyDialog"> 
<script type="text/javascript"> 

$("#deleteButton").live("click", function() { 
     alert("this alert increments"); 

}); 

</script> 

    <div data-role="header" data-theme="d"> 
     <h1>Dialog</h1> 

    </div> 

    <div data-role="content" data-theme="c"> 
     <h1>Delete Company</h1> 
     <p id="message"></p> 
     <a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>  
     <a href="company.jsp" data-role="button" data-rel="back" data-theme="c">Cancel</a>  
    </div> 
</div> 

wydaje się zachowują live("click".. wiążące od wszelkich wcześniejszych wezwań do tego okna, a następnie ponownie wiąże połączenie live. Więc jeśli zadzwonię na stronę 4 oddzielne czasy, na czwartym wywołanie strony dialogowej wyskoczy 4 ekrany alertów. Czy istnieje sposób, aby javascript nadal był w zakresie data-role="page", aby mógł załadować z ajaxem, ale nie zwiększać wiązania "na żywo". Próbowałem $("#deleteCompanyDialog").live("pagecreate"..., a także pageload (długie ujęcie), które również nie działa.

Pomoc byłaby bardzo ceniona.

Answer 1

Zamiast .live() użyć .bind() i umieścić JavaScript w delegowanego obsługi zdarzeń:

<div data-role="page" id="deleteCompanyDialog"> 

    <div data-role="header" data-theme="d"> 
     <h1>Dialog</h1> 

    </div> 

    <div data-role="content" data-theme="c"> 
     <h1>Delete Company</h1> 
     <p id="message"></p> 
     <a data-role="button" data-theme="b" id="deleteButton" >Sounds good</a>  
     <a href="company.jsp" data-role="button" data-rel="back" data-theme="c">Cancel</a>  
    </div> 
<script type="text/javascript"> 

$(document).delegate("#deleteCompanyDialog", "pageinit", function() { 
    $("#deleteButton").bind('click', function() { 
     alert("this alert DOES NOT increment"); 
    }); 
}); 

</script> 
</div> 

To jest tak jak z $(function() {}); ale dla jQuery Mobile. Zdarzenie pageinit zostanie uruchomione, gdy strona zostanie zainicjowana (dzieje się to raz na każdą pseudo stronę), a wywołanie funkcji będzie wiązało tylko elementy obecne w DOM. Gdy używasz .live(), nie wiąże się on z faktycznym elementem, wiąże się z elementem document, który nie jest usuwany po opuszczeniu okna dialogowego (więc za każdym razem, gdy wyświetlasz okno dialogowe, dodajesz inną delegowaną funkcję obsługi zdarzeń).