Question

我想添加一个'你确定吗？'确认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 mobile添加这些内容？

谢谢！

Answer 1

如果你给你的按钮提供ID或类，并在jQuery ready函数中绑定事件，或者动态创建表单的任何地方（如果你这样做），那就更好了。

假设您为后退和主页按钮提供以下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中执行的大多数用户交互不同。这意味着当弹出对话框时，代码执行将保持不变，直到用户按下按钮，并且函数将评估该单击的结果。事实上，这就是你在这种情况下所需要的。

修改：@ bazmegakapa建议删除了preventDefault()。

Answer 2

我遇到了同样的问题，现在就解决了。我希望我的例子可以帮助你和其他有问题的人。

<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");

}

jQuery mobile：为链接添加确认对话框？

2 个答案: