阻止链接,确认然后转到位置jquery

时间:2011-07-25 20:30:49

标签: jquery popup confirmation preventdefault

我有这样的链接。

<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帖子?

9 个答案:

答案 0 :(得分:32)

你可以在点击内完成所有操作:

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

});

答案 1 :(得分:3)

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

$('.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”指令。

答案 2 :(得分:2)

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

答案 3 :(得分:2)

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

答案 4 :(得分:1)

这是一个简短形式:

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

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

答案 5 :(得分:1)

要优化show_confirm功能中的代码,请尝试使用以下内容:

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

答案 6 :(得分:0)

你可以做到

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

          //no ajax call
     }

    }    

答案 7 :(得分:0)

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

}

答案 8 :(得分:0)

如果您想使用提醒/确认,这是最好的方式(我更喜欢使用Bootstrap Confirmationbootbox):

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