使用此调用 <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 (长镜头)这也不起作用。
帮助将不胜感激。
最佳答案
不使用 .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)事件处理程序)。
关于javascript - JQuery 手机 : inline data-role ="page" javascript being retain when page is released from DOM?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8930651/