jQuery mobile：向链接添加确认对话框？答案

【问题标题】：jQuery mobile: add confirm dialog to links?jQuery mobile：向链接添加确认对话框？
【发布时间】：2011-04-26 21:11:14
【问题描述】：

我想添加一个“你确定吗？”确认对话框到 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 添加这些内容？

谢谢！

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

如果您为按钮提供 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 函数是同步的，这与您在 javascript 中通过 DOM 进行的大多数用户交互不同。这意味着当对话框弹出时，您的代码执行将暂停，直到用户按下按钮，并且该函数评估该单击的结果。这实际上是您在这种情况下所需要的。

编辑：根据@bazmegakapa 的建议删除了preventDefault()。

【讨论】：

+1 但是同时调用event.preventDefault() 和return false 有什么意义呢？ return false; 应该是 equal to preventDefault + stopPropagation。
好点，我刚刚发布了 jsfiddle 中的任何内容。另一方面，这表明该按钮上的原始代码没有任何问题，它只是不能作为内联 javascript 工作（至少在 Chrome 和 FF 中）。

【解决方案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");

}

【讨论】：