jQuery手機：添加確認對話框鏈接？

我想添加一個'你確定嗎？'確認對話框到jQuery移動頁面上的鏈接。jQuery手機：添加確認對話框鏈接？

這裏是我的代碼 - 它是直接跳出jQuery文檔，除了與他們上的confirm對話框的鏈接。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 
</head> 
<body> 

    <!-- Start of first page --> 
    <div data-role="page" id="foo"> 
     <div data-role="header"> 
      <h1>Foo</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
      <p>I'm first in the source order so I'm shown as the page.</p>  
      <p>View internal page called <a href="#bar">bar</a></p> 
     </div><!-- /content --> 
     <div data-role="footer"> 
      <h4>Page Footer</h4> 
     </div><!-- /header --> 
    </div><!-- /page --> 

<!-- Start of second page --> 
<div data-role="page" id="bar"> 
    <div data-role="header"> 
      <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a> 
    </div><!-- /header --> 
    <div data-role="content"> 
     <p>I'm first in the source order so I'm shown as the page.</p>  
     <p><a href="#foo">Back to foo</a></p> 
    </div><!-- /content --> 
    <div data-role="footer"> 
     <h4>Page Footer</h4> 
    </div><!-- /header --> 
</div><!-- /page --> 

</body> 
</html>

目前確認的對話框沒有影響:(

任何人都知道我可以用jQuery移動添加這些？

謝謝！

來源

2011-04-26 simon

這是更好，如果你給ID或類你的按鈕並將事件綁定到你的jQuery就緒函數中，或者你動態創建表單的任何地方（如果你這樣做）。

假設你給下面的id屬性的返回和首頁按鈕和刪除內聯onclick屬性，它添加到腳本標籤：

$(function(){ 
    $('#btnBack').click(function(){ 
     if(!confirm("Leave page?")) return false; 
     history.back(); 
    }); 

    $('#btnFoo').click(function(event){ 
     return confirm("Leave page?"); 
    }); 
});

當單擊後退按鈕，它只有在用戶取消了該操作返回false。如果他們點擊確定，您想要執行history.back()以返回上一頁。

在foo鏈接上，您必須返回false以避免自動跟隨超鏈接。

另請注意，confirm函數是同步的，與通過DOM在JavaScript中執行的大多數用戶交互不同。這意味着當彈出對話框時，您的代碼執行被保留，直到用戶按下按鈕，並且該函數評估爲該點擊的結果。這實際上是你在這種情況下需要的。

編輯：刪除preventDefault()關於@ bazmegakapa的建議。

來源

2011-04-26 21:30:21 DarthJDG

+1但是，什麼是呼籲雙方'event.preventDefault（）'和'返回FALSE'點？ 'return false;'應該[等於]（prevent_factory）。 – kapa 2011-04-27 07:48:44

好點，我只是張貼任何工作在jsfiddle。另一方面，這表明該按鈕上的原始代碼沒有任何問題，但它不能用作內聯JavaScript（至少在Chrome和FF中）。 – DarthJDG 2011-04-27 08:26:00

很可愛，謝謝！ – simon 2011-04-27 16:48:19

我面臨同樣的問題，現在就解決了。我希望我的例子可以幫助你和其他有模擬器問題的人。

<a href="javascript:delComment();" data-role="button" data-icon="false" data-mini="true" data-inline="true" data-theme="b">Delete</a> 



function delComment(commentSno) { 

... 
// save 
var nextUrl = "/deleteComment.do"; 
$("#frm").attr("action", nextUrl); 

showConfirm("Are you sure to delete?", function() { 
    $("#frm").submit(); 
    } 
); 

} 





<div data-role="dialog" id="confirmbox"> 
    <div data-role="header" data-icon="false"> 
     <h1>Confirmation</h1> 
    </div><!-- /header --> 

     <div data-role="content"> 
     <h3 id="confirmMsg">Confirmation Message</h3> 

     <br><p> 
     <center> 
     <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Yes&nbsp;&nbsp;&nbsp; </a> 
     &nbsp;&nbsp;&nbsp; 
     <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">No</a> 
     </center> 
     </div>

function showConfirm(msg, callback) { 
     $("#confirmMsg").text(msg); 
     $("#confirmbox .btnConfirmYes").on("click.confirmbox", function() { 
      $("#confirmbox").dialog("close"); 
      callback(); 
     }); 

     $("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) { 
      }); 

     $.mobile.changePage("#confirmbox"); 

}

來源

2012-11-12 02:56:07 Lina

jQuery手機：添加確認對話框鏈接？

回答

相關問題