Geek Answers Handbook

JQuery Mobile: inline data-role = "page" javascript persist when page is released from DOM?

Using this call <a href="deleteDialog.html" data-rel="dialog" data-transition="pop" data-role="button" id='deleteDialog'>Delete</a>to get the following dialog page:

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

It seems to retain the binding live("click"..from any previous calls to this dialog, and then bind the call again live. Therefore, if I call a separate page time, a warning popup will appear on the fourth page of the dialog box. Is there a way for javascript to still be within data-role="page", so it can be loaded using ajax, but not increase the live binding. I tried $("#deleteCompanyDialog").live("pagecreate"...as well pageload(long shot) which also doesn't work.

Help would be greatly appreciated.

+5
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, , ( , , ).

+7

More articles:


All Articles