2016-11-12 92 views
-3

後,我有我的HTML以下鏈接:請確認鏈接被點擊

<a href="/posts/1/delete" class="delete">Delete</a> 

和我有click事件:

$("a.delete").on("click", function (event) { 
    // Delete post 
} 

然而,後被刪除之前,我需要問用戶確認。

所以我需要添加以下到HTML:

<div class="message">Are you sure? Yes Button/No Button</div> 

的程序應該是這樣的:

message.delay(400).slideDown(0.9) 
// Ask question 
message.slideUp(400, function() { $(this).remove(); }); 
// At the end the message DIV should be removed 

我想有這樣的插件是可重複使用的。例如:

<a href="/posts/1/delete" class="delete confirm" data-question="Are you sure?">Delete</a> 

我該怎麼做?

+1

其中是link元素相對於'message'元素嗎?是否有多個消息類?提供一個[mcve] – charlietfl

+0

@charlietfl不確定你的問題,但是當單擊鏈接時,它應該將消息DIV添加到HTML並顯示它...消息DIV在鏈接被單擊之前不存在。 –

+0

可以使用'確認'嗎? – br3t

回答

0
(function ($) { 
    $.fn.message = function (options) { 
    $(this).each(function() { 
     var $this = $(this); 
     $this.on("click", function(e) { 
     e.preventDefault(); 
     var cnfrm = $("<div class='cnfrm'>" + $this.attr("data-question") + "<button class='y'>Yes</button><button class='n'>No</button>"); 
     $this.after(cnfrm); 

     cnfrm.find(".y").on("click", function() { 
      $this.slideUp(400, function() { 
       $(this).remove(); 
       location.href = $this.attr("href"); 
      }); 
     }); 
     }); 
    }); 
    return this; 
    }; 
})(jQuery); 
+0

不是很明白......當A標籤被點擊,向下滑動時,我需要將消息DIV添加到HTML中,問問題並且只有在確認後才能滑動。在這種情況下,與鏈接點擊相關的代碼被遵循 –

+0

我剛剛更新了我的問題,以澄清我在找什麼 –

+0

我更新了我的代碼,檢查它 – br3t