JQuery Mobile: inline data-role = "page" javascript siendo retenido cuando se lanza la página desde DOM?

Question

Usando esta llamada <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a> obtener la siguiente página de diálogo:

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

parece conservar la live("click".. unión de todas las llamadas anteriores a este cuadro de diálogo y luego se une a la llamada live nuevo. Por lo tanto, si llamo a la página 4 veces por separado, en la cuarta página del cuadro de diálogo, se abrirán 4 pantallas de alerta. ¿Hay alguna manera de tener el javascript aún dentro de data-role="page" para que pueda cargarse con ajax pero no incrementar el enlace "activo"? Intenté $("#deleteCompanyDialog").live("pagecreate"..., así como pageload (una posibilidad muy remota) que tampoco funciona.

Ayuda sería muy apreciada.

Answer 1

En lugar de utilizar .live(), utilice .bind() y coloque el JavaScript en un controlador de eventos delegada:

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

Esto es como usar $(function() {}); pero para jQuery Mobile. El evento pageinit se activará cuando la página se inicialice (ocurre una vez por pseudopágina) y la llamada a la función .bind() solo se vinculará a los elementos presentes en el DOM. Cuando utiliza .live() no se vincula al elemento real, se une al elemento document, que no se elimina cuando se aleja del diálogo (por lo que cada vez que muestra el cuadro de diálogo agrega otro controlador de eventos delegados).