阻止链接、确认后跳转到指定位置的 jQuery 代码

Question

我有这样的链接。

<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 post请求呢？

- esafwan

Answer 1

您可以通过一次点击完成所有操作：

$('.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));

});

- locrizak

---

好的，那么...这种方法存在一个陷阱，就是它没有考虑用户是否打算在新标签页中打开链接，甚至可能有一个target="_somespecificwindow"或target="_blank"在其中.. :) - Michiel Cornille

如果你在链接上使用“打开新标签页”或中键单击，你将通过确认，使用<button>而不是<a>将防止意外打开链接，无需确认。 - Arash

Answer 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"指令。

- Travis Heeter

---

这个对我有用。如果我采用了被接受的解决方案 $(this).attr('href') 将返回 undefined。 - dbr

Answer 3

为了优化 show_confirm 函数中的代码，请尝试使用以下方法：

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

- Chanraksmey

Answer 4

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

- Paul

Answer 5

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

- ChristopheCVB

Answer 6

这是一个简短的表单：

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

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

- Matteo Conta

Answer 7

你可以这样做

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

          //no ajax call
     }

    }    

- Nicola Peluchetti

Answer 8

如果你喜欢使用alert/confirm，这是最好的方法（我更喜欢使用Bootstrap Confirmation或bootbox）：

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

- Roy Shoa

Answer 9

在我的情况下，jQuery无法运行，所以我采用了这个解决方案：

<button onclick="show_confirm('delete?id=1')">&times;</button>

而且

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

- Sprhld

Answer 10

 $('.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;

}

- Claudio