JQuery Mobile: встроенный data-role = "page" javascript, сохраняемый при выходе страницы из DOM?

Question

Используя этот вызов <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a>, вы получите следующую диалоговую страницу:

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

, кажется, сохраняет привязку live("click".. от любых предыдущих вызовов к этому диалоговому окну, а затем снова связывает вызов live. Поэтому, если я вызову страницу 4 раза, на четвертой странице диалога появится 4 экрана с предупреждениями. Есть ли способ, чтобы javascript все еще находился в пределах data-role="page", чтобы он мог загружаться с помощью ajax, но не увеличивал «живую» привязку. Я пробовал $("#deleteCompanyDialog").live("pagecreate"..., а также pageload (длинный выстрел), который тоже не работает.

Помощь будет принята с благодарностью.

Answer 1

Вместо использования .live() используйте .bind() и поместите свой JavaScript в обработчик делегированных событий:

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

Это похоже на использование $(function () {});, но для jQuery Mobile. Событие pageinit сработает при инициализации страницы (происходит один раз на псевдостраницу), а вызов функции .bind() будет привязан только к элементам, присутствующим в DOM. Когда вы используете .live(), он не привязывается к реальному элементу, он привязывается к элементу document, который не удаляется при выходе из диалогового окна (поэтому каждый раз, когда вы показываете диалоговое окно, вы добавляете другое делегированное событие обработчик).