如何将按钮传递给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)时，您必须确保您在正确的对象中使用它。您不能在$（确认）中使用$(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，并选择它，波纹管：

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

：有针对性的按钮

HTML代码按压此按钮更新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一个例子，这是一个替换˚F或JavaScript内置警报弹出。如果你之前没有检查过SweetAlert，我强烈建议你这样做。 It also integrates very well with 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>