如何在单击按钮时显示一个元素

Question

假设有一个html页面，当我点击一个按钮时，我读到：“

我点击“确定”时需要处理

这是html代码：

<button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button>

这是我的jquery代码：

(function() {

        $(document).on('click','button[data-bb-handler="confirm"][type="button"]',function(){
            console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
        });

}());

它不起作用。有人可以帮帮我吗？其他一些方法？

Answer 1

这段Jquery代码应该可以工作：

$('button[data-bb-handler="confirm"][type="button"]').click(function(){
  console.log("MAREEEEEEEEEEEEEEEEE "+$(this).length);
});

如果不起作用，请告诉我。请检查此Working Codepen

Answer 2

我建议使用Bootbox JS。它基于Bootstrap布局。

您可以实现以下所需的

bootbox.confirm("Are you sure?", function(result) {
  // write your code what you need to handle on OK button
}); 

Answer 3

您可以使用事件 show.bs.modal ：

//
// On modal show
//
$(document).on('show.bs.modal', function (e) {
  //
  // attach the click event  for OK button
  //
  $('button[data-bb-handler="cancel"][type="button"]').on('click', function (e) {
    console.log("CANCEL BUTTON PRESSED");
  });

  //
  // attach the click event  for CANCEL button
  //
  $('button[data-bb-handler="confirm"][type="button"]').on('click', function (e) {
    console.log("OK BUTTON PRESSED");
  });
});

 $(document).ready(function() {
  $('#myBtn').on('click', function (e) {
    bootbox.confirm("Are you sure you wish to discard this post?", function () {
    });
  }).trigger('click');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>

<button id="myBtn" type="button" class="btn btn-primary">Click Me</button>

这是bootbox.confirm消息。对于deatils，您可以参考Bootbox.js。

当您单击确定或取消对话框时，dom元素将从文档中删除。

所以你必须使用回调函数：

$(document).on('click.bootbox', function(e, result){
  console.log("Pressed "+ result);
});

bootbox.confirm("Are you sure you wish to discard this post?", function(result) {
  $(document).trigger('click.bootbox', result);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>