JQuery Mobile：inline 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個警報屏幕。有沒有辦法讓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元素，當您離開對話框時（這樣每次顯示對話框時添加另一個委託事件處理程序），該元素都不會被刪除。