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

JQuery Mobile：内联data-role =“page”当从DOM发布页面时，javascript会被保留吗？

1 个答案: