阻止链接，确认然后转到位置 jquery答案

【问题标题】：Prevent a link, confirm and then goto location jquery阻止链接，确认然后转到位置 jquery
【发布时间】：2011-10-12 21:54:05
【问题描述】：

我有这样的链接。

<a href="delete.php?id=1" class="delete">Delete</a>

如果用户点击它。应该会弹出一个确认信息，然后只有当用户单击“是”时，它才会转到实际的 url。

我知道这可以防止默认行为

    function show_confirm()
    {
    var r=confirm("Are you sure you want to delete?");
    if (r==true)   {  **//what to do here?!!** }

    }    


    $('.delete').click(function(event) {
    event.preventDefault();
    show_confirm()
    });

但我如何在确认后继续访问该链接或向该链接发送 ajax 帖子？

【问题讨论】：

标签： jquery popup confirmation preventdefault

【解决方案1】：

如果你喜欢使用警报/确认，这是最好的方式（我更喜欢使用Bootstrap Confirmation 或bootbox）：

$('.confirm-delete').click( function( event ) {
    if ( !confirm('Are you sure?') ) event.preventDefault();
});

【讨论】：

【解决方案2】：

我花了一段时间才弄清楚这一点，所以我想我会发布我的解决方案。

$('.delete').click(function(e){
    if(confirm('Are you sure?')){
        // The user pressed OK
        // Do nothing, the link will continue to be opened normally
    } else {
        // The user pressed Cancel, so prevent the link from opening
        e.preventDefault();
    }
}

我正在考虑确认错误的方式。确认将阻止站点自动打开，并等待用户输入。所以基本上，你需要将你的 preventDefault 移动到 else。

因此，您只有在他们单击“取消”时才阻止打开链接。这也允许链接正常运行，例如，如果它有一个 target="_blank" 指令。

【讨论】：

这个对我有用。如果我选择接受的解决方案$(this).attr('href') 返回undefined

【解决方案3】：

要优化函数 show_confirm 中的代码，请尝试使用以下代码：

function show_confirm(obj){
   if(confirm("Are you sure you want to delete?")) window.location = obj.attr('href');
}

【讨论】：

【解决方案4】：

这是一个简短的形式：

$('.delete').click(function(){return confirm("Are you sure you want to delete?")});

我在网站上使用它来确认下载/链接。

【讨论】：

【解决方案5】：

 $('.delete').click(function() {

   if (confirm('Are you sure?')) {
     $.post($(this).attr('href'), function() {
       // Delete is OK, update the table or whatever has to be done after a succesfull delete
      ....
     }
   }

   return false;

}

【讨论】：

【解决方案6】：

function show_confirm(elem)
{
    var r=confirm("Are you sure you want to delete?");
    if (r==true) { 
        window.location.href = elem.href;
    }
}    

$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm(this)
});

【讨论】：

【解决方案7】：

function show_confirm(url){
    var r=confirm("Are you sure you want to delete?");
    if (r==true){
        location.top.href = url;
    }
}    


$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm($(this).attr('href'));
});

如果您想使用 ajax，可以将 location.top.href = url; 替换为 $.get(url);

【讨论】：

【解决方案8】：

你可以的

function show_confirm()
    {
    if(confirm("Are you sure you want to delete?")){
        //make ajax call
     }else{

          //no ajax call
     }

    }

【讨论】：

【解决方案9】：

点击即可完成所有操作：

$('.delete').click(function(event) {
    event.preventDefault();
    var r=confirm("Are you sure you want to delete?");
    if (r==true)   {  
       window.location = $(this).attr('href');
    }

});

或者你可以通过将点击的元素传递给函数来做到这一点：

function show_confirm(obj){
    var r=confirm("Are you sure you want to delete?");
    if (r==true)  
       window.location = obj.attr('href');
}    
$('.delete').click(function(event) {
    event.preventDefault();
    show_confirm($(this));

});

【讨论】：

好的，所以.. 这种方法有一个陷阱，那就是如果用户打算在新选项卡中打开链接，这不会看，甚至可能有一个目标="_somespecificwindow" 或 target="_blank" 在那里..:)
如果您在新标签中打开或鼠标中键点击链接，您将通过确认，使用<button>而不是<a>将防止意外打开链接,未经确认