如何将按钮传递给 Jquery 函数？

Question

我正在使用名为 jQquery.confirm 的第三方 jQuery 库。它在 jQuery 中提供对话框。单击特定 class 的按钮后，我想使用 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) 并期望引用您的 $(".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');
        }
    });
});

我不确定这是否是你想要做的，但请考虑上面的代码是一种无限循环，因为当点击被触发时，整个代码将被再次调用。因此，如果你想按不同的按钮，请使用完整的 selector ，或者为他分配一个唯一的 ID 和 select 它，如下所示：

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, which is a replacement for Javascript built-in alert popup. If you have not checked out SweetAlert before, I highly recommend you do. 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>

如何将按钮传递给 Jquery 函数？

How to pass button into Jquery function?

javascript

jquery

confirm

arguments

dialog