JQuery Mobile: javascript inline data-role = "page" viene mantenuto quando la pagina viene rilasciata dal DOM?

Question

Utilizzando questa chiamata <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a> per ottenere la seguente pagina di dialogo:

<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> 

sembra mantenere la live("click".. vincolante da tutte le chiamate precedenti a questa finestra di dialogo e poi si lega ancora una volta la chiamata live. Quindi, se chiamo la pagina 4 volte separate, alla quarta pagina di dialogo chiamata verrà visualizzata una finestra di 4 schermate di avviso. C'è un modo per avere il javascript ancora all'interno di data-role="page" in modo che possa caricare con Ajax ma non incrementare il binding "live". Ho provato $("#deleteCompanyDialog").live("pagecreate"... così come pageload (un colpo lungo) che non funziona neanche.

L'aiuto sarebbe molto apprezzato.

Answer 1

Invece di utilizzare .live(), utilizzare .bind() e posizionare il JavaScript in un gestore di eventi delegato:

<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> 

Questo è come l'utilizzo di $(function() {}); ma per jQuery Mobile. L'evento pageinit si attiva quando la pagina viene inizializzata (avviene una volta per ogni pseudo-pagina) e la chiamata alla funzione .bind() si associa solo agli elementi presenti nel DOM. Quando si utilizza .live() non si associa all'elemento reale, si associa all'elemento document, che non viene rimosso quando si sposta fuori dalla finestra di dialogo (quindi ogni volta che si visualizza la finestra di dialogo si aggiunge un altro gestore di eventi delegato).