リンクが

Question

をクリックした後、私は私のHTMLに次のリンク持って確認を確認する：

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

をそして、私はクリックイベントがあります

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

しかし、ポストが削除される前に私が依頼する必要がありますユーザーに確認してください。

は、だから私はHTMLに以下を追加する必要があります：私は再利用できるようにプラグインとしてこれを持っていると思い

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

：

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

手順は次のようになります。例：

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

どうすればよいですか？

Answer 1

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