JQuery Mobile：当页面从 DOM 释放时，内联 data-role="page" javascript 被保留？

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 元素，当您离开对话框时，该元素不会被删除（因此每次显示对话框时，您都会添加另一个委托事件处理程序）。