如何將按鈕傳遞到Jquery函數？

Question

我正在使用名為jQquery.confirm的第三方jQuery庫。 它提供了jQuery對話框。 在單擊特定類的按鈕后，我想使用confirm()函數來顯示確認信息：

$(".btn-danger").click(function(event) {
    //Prevent the button from being clicked.
    event.preventDefault();

    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            //Code in here for button to be pressed
        }
    });
});

我遇到的問題是與confirm: function() 。 我想簡單地模擬單擊此處的按鈕。 我已經嘗試過了，但是似乎無法識別我需要單擊的按鈕：

$(this).trigger("click");

我猜我需要將它作為參數傳遞給某個地方嗎？

Answer 1

在confirm處理程序功能內， this范圍將不涉及單擊的按鈕。 要解決此問題，您需要將對單擊按鈕的引用存儲在confirm處理程序之外的變量中。

但是請注意，您創建的邏輯將最終陷入循環。 您要點擊按鈕，顯示confirm然后以編程方式再次單擊按鈕，這將再次顯示confirm ，依此類推。 我建議您調用一個函數來執行confirm操作中所需的操作，如下所示：嘗試以下操作：

$(".btn-danger").click(function(e) {
    e.preventDefault();

    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            actionWasConfirmed();
        }
    });
});

var actionWasConfirmed = function() {
    console.log('do something here...');
};

Answer 2

按鈕的HTML代碼：

<button class="btn-danger" >Delete</button>

和Javascript功能

$(".btn-danger").click(function(){
if(confirm("Are you sure you want to delete that comment?")){
   //Code in here for button to be pressed
  }
 });

Answer 3

每個事件回調函數都會收到對觸發它的事件的引用。 您已經准備好使用event參數來獲取該引用。 通過該對象，您可以引用觸發事件的對象（在您的情況下為按鈕）。 因此，您可以這樣做：

$(".btn-danger").click(function(event) {

  //Prevent the button from being clicked.
  event.preventDefault();

  $.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        event.target.trigger("click")"
    }
  });
});

但是，正如已經指出的那樣，單擊按鈕將在確認后導致再次單擊按鈕。

由於您只想在確認后刪除某些內容，因此更好的方法是僅刪除條目。 換句話說，分開您的邏輯。 單擊按鈕應觸發確認，確認應刪除條目，而不是再次單擊按鈕。

$(".btn-danger").click(function(event) {

  //Prevent the button from being clicked.
  event.preventDefault();

  $.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        // Delete the comment here, don't click more buttons.
    }
  });
});

Answer 4

使用$(this) ，必須確保在正確的對象中使用它。 您不能在$（confirm $(this)內使用$(this)並期望引用$(".btn-danger") 。 相反，它將引用$(confirm)而不是您的目標按鈕。

看一下下面的工作示例，並詢問是否不清楚。

$(".btn-danger").click(function(e) {
    e.preventDefault();
    // Here $(this) references the object you need clicked
    var currentButton = $(this);
    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            // If you used $(this) here you referenced to your $(confirm) object

            // Instead of a false $(this), use the button that actually triggered this code.
            currentButton.trigger('click');
        }
    });
});

我不確定這是否是您要執行的操作，但是請考慮上面的代碼是一個無限循環，因為觸發單擊時，將再次調用整個代碼。 因此，如果您想按下其他按鈕，請使用它的完整選擇器，或者為他分配一個唯一的ID並選擇它，如下所示：

目標按鈕的HTML代碼：

<input type="button" value="Button To Be Clicked after Confirm" name="myButton" id="uniqueID_onWholePage" />

更新了按此按鈕的jQuery代碼

$(".btn-danger").click(function(e) {
    e.preventDefault();
    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            $('#uniqueID_onWholePage').trigger('click');
        }
    });
});

Answer 5

這是一個使用SweetAlert的示例，它替代了Javascript內置警報彈出窗口。 如果您以前沒有簽出SweetAlert，我強烈建議您這樣做。 它還與Bootstrap集成得很好 。

這是一個有效的示例（您可能需要全屏顯示才能獲得完整效果）。 不幸的是，您將無法看到實際的提交工作，但是一旦添加了實際操作，代碼就應該工作。

 $("form.confirm").find("[type=submit]").click(function(e) { var $this; e.preventDefault(); $this = $(this); return sweetAlert({ title: "Are you sure?", type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Confirm Delete", closeOnConfirm: false }, function() { return $this.closest("form").submit(); }); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="confirm" method="POST" action""> <button type="submit">Submit</button> </form>