Question

我有以下html和jquery代码，用于删除带有确认的会员帐户。但代码似乎不起作用：即使我在弹出窗口中单击“取消”，仍然会提交请求并删除帐户。我该怎么纠正这个？感谢。

HTML：

<button class="member" href="/admin?arg1=deleteMember" onclick="return confirm('Are you sure？')">Delete member</button>

jQuery的：

$(document).ready(function() {
  $('.member').click(function() {
    var url = $(this).attr('href');
    $('#content').load(url);
      return false;
  });
});

Answer 1

$(document).ready(function() {
  $('.member').click(function() {
    if (confirm('Are you sure?')) {
      var url = $(this).attr('href');
      $('#content').load(url);
    }
  });
});

然后从HTML元素中删除onclick属性。

Answer 2

您已以两种方式宣布您的活动。一个使用内联事件处理程序，一个使用JQuery。他们对return false的反应方式不同。

在JQuery事件处理程序中，return false都会阻止事件在其轨道中传播，而会阻止浏览器应用的默认行为。在常规内联事件处理程序中，它只是停止默认行为。对于此按钮，没有默认行为可言。它只是一个按钮。所以如果你点击＆＃34;取消＆＃34;然后继续运行接下来的JQuery事件，它会很高兴地返回false。

要解决此问题，最简单的方法是将所有逻辑放在一个位置 - 无论是JQuery还是内联事件，或者让内联事件调用一个执行所有逻辑的函数。

例如：

$(function()
{
    $('.member').click(function()
    {
        var href = $(this).attr('href');
        if (/delete/.test(href)) if (!confirm('Are you sure?')) return;
        $('#content').load(href);
    });
});

Answer 3

在false（或button）的点击处理程序中返回input type="button"无效，因为没有默认行为可以停止，例如input type="submit"按钮或链接。

删除标记中的onclick属性，并在jQuery点击处理程序中调用confirm：

$(document).ready(function() {

  $('.member').click(function() {
    if (window.confirm('Are you sure？')) {
      $('#content').load($(this).attr('href'));
    }
  });

});

Answer 4

确定。在查看任何这些有效答案之前，我自己想出来了。我只是想让任何人尝试：

第一个HTML

1st：假设这是您向用户呈现的按钮：

<button id="btn_to_check">Do Something</button>

第二名现在，只有当用户点击按钮#btn_to_check时，您才会向他们展示一个带有两个按钮的确认窗口，以确认他们的意图（即接受并返回）：

<div id="btn_confirmation_window" style="display:none">
  <button id="accept" value="true">accept</button>
  <button id="go_back" value="false">go back</button>
</div>

现在的JAVASCRIPT

$('#btn_to_check').on('click', function(){
  confirmationWindow();
});

function confirmationWindow(){
    $('#btn_confirmation_window').fadeIn(); //or show() or css('display','block')
    $('#btn_confirmation_window button').on('click', function(){
          var confirm= $(this).attr('value');
          if (confirm=='true') {   
                 //Code if true e.g. ajax
          } else if (confirm=='false'){
                //Code if false
          }
      }
}

希望它有所帮助！

Answer 5

我发现这很简单。它只使用bootstrap和jquery。

    $(document).ready(function() {
        $('a[data-confirm]').click(function(ev) {
            var href = $(this).attr('href');
            $('#modal').find('.modal-title').text($(this).attr('data-confirm'));
            $('#modal-btn-yes').attr('href', href);
            $('#modal').modal({show:true});
            return false;
        });
    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<a  href="controllers/my-delete.php?id=5" 
    class="btn btn-danger" 
    role="button" 
    style="width: 100%;"
    data-confirm="Are you sure you want to delete?">Delete</a>

<div class="modal fade " id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Are You Sure?</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        There is no way to undo this action
      </div>
      <div class="modal-footer">
        <a id="modal-btn-yes" class="btn btn-danger" >Yes</a>
        <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
      </div>

    </div>
  </div>
</div>

jQuery：按钮单击确认

5 个答案: