Question

我正在尝试使用jQuery实现一些非常基本的（在我看来）功能。我有Delete链接：

<a href="/Delete" class="prompt-for-delete">Delete</a>

我想要的只是点击链接以显示某种确认窗口，如：

您确定要删除此内容：是/否

如果单击No，我想阻止链接执行。我使用jquery-1.10.2.min.js和 jquery-ui-1.10.3.min.js我的HTML是：

<div id="dialog-confirm" ></div>
<a href="/Delete" class="prompt-for-delete">Delete</a>

我尝试了几种在互联网上找到的选项。最后一个是：

$(document).ready(function () {

        $('.prompt-for-delete').click(function (e) {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 140,
                modal: true,
                buttons: {
                    "Delete all items": function () {
                        $(this).dialog("close");
                    },
                    Cancel: function () {
                        $(this).dialog("close");
                    }
                }
            });
        });

    });

这只是为了得到一些工作，但有了这个我打开对话框，并在一秒后自动关闭。它似乎非常标准，所以你能提供一个如何实现这个目标的例子吗？

Answer 1

Confirm()正是您要找的。这是你如何使用它：

var answer=confirm('Do you want to delete?');

您的HTML就像：

<a id="delete" href="/Delete" class="prompt-for-delete">Delete</a>

你的javascript：

$('#delete').on('click',function(e){
    e.preventDefault();
    var answer=confirm('Do you want to delete?');
    if(answer){
     alert('Deleted');
    }
    else{
        alert('Not Deleted');      
    }
});

您可以在此处查看演示：http://jsfiddle.net/c9cLW/1/

编辑：

这是更新的重定向和阻止事件：

脚本：

$('#delete').on('click',function(e){
    var answer=confirm('Do you want to delete?');
    if(answer){
     alert('Deleted');
    }
    else{
     e.preventDefault();      
    }
});

更新小提琴：http://jsfiddle.net/c9cLW/5/

Answer 2

我会在页面中创建一个，显示一个对话框并返回结果：

<div id="divConfirmMessageDialog" class="ui-dialog" title="Confirm">
    <p id="confirmMessage"></p>
</div>

confirmDialog: function (message) {
    "use strict";
    var def = $.Deferred();
    $("#divConfirmMessageDialog").dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: false,
        buttons: {
            Yes: function () {
                $(this).dialog("close");
                def.resolve();
            },
            No: function () {
                $(this).dialog("close");
                def.reject();
            }
        }
    });
    $("#confirmMessage").text(message);
    $("#divConfirmMessageDialog").dialog('open');
    return def.promise();
}

function remove() {
        confirmDialog('Items will be removed...Continue?').done(function () {
            return true;
        }).fail(function () {
            return false;
        });

    }

Answer 3

对话按钮的点击次数将被推迟。因此，您需要始终取消点击，然后手动重定向：

$(document).ready(function () {

    $('.prompt-for-delete').click(function (e) {
         //get href of click
         var href = $(this).attr('href');
         $("#dialog-confirm").dialog({
            resizable: false,
            height: 140,
            modal: true,
            buttons: {
                "Delete all items": function () {
                    $(this).dialog("close");
                    //redirect manually ONLY on success.
                    window.location = href;
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
        //always cancel the click.
        e.preventDefault();
    });

});

Answer 4

$('.prompt-for-delete').click(function (e) {
      if(!confirm('Do you want to delete?')){
           e.preventDefault();
      }
});

小提琴：http://jsfiddle.net/c9cLW/2/

Answer 5

<a href="_blank" onclick="if(!confirm('Are you sure?')) event.preventDefault()">click</a>

如何确认并在点击事件中使用e.PreventDefault

5 个答案: