Question

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

我点击“确定”按钮

时需要处理

这是html代码：

     <div class="modal-content">
<div class="modal-body">
<button type="button" class="bootbox-close-button close" data-dismiss="modal" aria-hidden="true" style="margin-top: -10px;">×</button>
<div class="bootbox-body">Are you sure you wish to discard this post?</div></div><div class="modal-footer"><button data-bb-handler="cancel" type="button" class="btn btn-default">Cancel</button><button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button></div></div>

这是我的jquery代码：

(function() {

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

}());

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

Answer 1

你可以像这样直接处理事件：

<button id="confirmBtn" type="button" class="btn btn-primary">OK</button>

(function() {

   $("#confirmBtn").click(function(e){
       e.preventDefault();
       console.log("This " + $(this).length);
   })

}());

Answer 2

<强> 更新

您可以使用事件 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>

Answer 3

尝试添加$（文档）.ready

$（document）.ready（function（）{ $（document）.on（'click'，'button [data-bb-handler =“confirm”] [type =“button”]'，function（）{ console.log（“MAREEEEEEEEEEEEEEEEE”+ $（this）.length）; }）; }）;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-bb-handler="confirm" type="button" class="btn btn-primary">OK</button>

Answer 4

我做了同样的事情，我将分享我的代码作为例子：

$('.delete').click(function(e){
          e.preventDefault();
          var id = $(this).data('num');
          var action = $(this).data('action');
          if (action=='enable') {
            azione='riattivare';
          }else{
            azione='disabilitare';
          }
          bootbox.confirm("Vuoi "+azione+" il movimento selezionato?", function(result) {
              if (result==true) {
                delete_mov(id,action);
              }else{
                bootbox.alert('Nessuna modifica effettuata');
              }
              //bootbox.alert("Movimento correttamente cancellato");
              //console.log("cancello il record "+id);
          });
        });

在我的代码中，当您单击class delete按钮时，它会打开一个模式以请求确认（与您需要的相同）。请注意bootbox.confirm上的回调。如果你点击确定，结果为真，否则为假。因此，如果在回调中你得到result==true用户点击确定

Answer 5

我做了同样的事情，我将分享我的代码作为例子：

$('.delete').click(function(e){
          e.preventDefault();
          var id = $(this).data('num');
          var action = $(this).data('action');
          if (action=='enable') {
            azione='riattivare';
          }else{
            azione='disabilitare';
          }
          bootbox.confirm("Vuoi "+azione+" il movimento selezionato?", function(result) {
              if (result==true) {
                delete_mov(id,action);
              }else{
                bootbox.alert('Nessuna modifica effettuata');
              }
          });
        });

在我的代码中，当您单击class delete按钮时，它会打开一个模式以请求确认（与您需要的相同）。请注意bootbox.confirm上的回调。如果你点击确定，结果为真，否则为假。因此，如果在回调中你得到result==true用户点击确定

如何获得确认按钮值模态

5 个答案: