JQuery Mobile:内联data-role ="page"当从DOM发布页面时,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元素,当您离开对话框时不会被删除(因此每次显示对话框时都会添加另一个委托事件处理程序).