javascript - JQuery 手机 : inline data-role ="page" javascript being retain when page is released from 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"..从以前的任何调用绑定(bind)到此对话框，然后绑定(bind) live重拨。因此，如果我分别调用该页面 4 次，在第四次调用对话框页面时，它将弹出 4 个警告屏幕。有没有办法让 javascript 仍然在 data-role="page" 内？因此它可以加载 ajax 但不会增加“实时”绑定(bind)。我试过 $("#deleteCompanyDialog").live("pagecreate"...以及pageload (长镜头)这也不起作用。

帮助将不胜感激。

Answer 1

不使用 .live()，而是使用 .bind() 并将您的 JavaScript 放在委托(delegate)的事件处理程序中:

<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() 函数调用将仅绑定(bind)到 DOM 中存在的元素。当您使用 .live() 时，它不会绑定(bind)到实际元素，它会绑定(bind)到 document 元素，当您离开对话框时该元素不会被删除(因此每次显示对话框时都会添加另一个委托(delegate)事件处理程序)。