12

我有以下 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;
  });
});
4

5 回答 5

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

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

于 2013-02-16T05:45:49.467 回答
3

您以两种方式声明了您的事件。一种使用内联事件处理程序，一种使用 JQuery。他们对 的反应不同return false。

在 JQuery 事件处理程序中，return false既停止事件在其轨道中的传播，又阻止浏览器应用默认行为。在常规的内联事件处理程序中，它只是停止默认行为。在这个按钮的情况下，没有默认行为可言。它只是一个按钮。因此，如果您单击“取消”，它会愉快地返回 false，然后继续运行接下来的 JQuery 事件。

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

例如：

$(function()
{
    $('.member').click(function()
    {
        var href = $(this).attr('href');
        if (/delete/.test(href)) if (!confirm('Are you sure?')) return;
        $('#content').load(href);
    });
});
于 2013-02-16T05:55:03.823 回答
3

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

删除onclick标签中的属性，并调用confirmjQuery 点击处理程序：

$(document).ready(function() {

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

});
于 2013-02-16T05:56:29.220 回答
2

行。在查看任何这些有效答案之前，我自己想通了。我只是要把我的扔给任何人尝试：

首先是 HTML

第一：假设这是您呈现给用户的按钮：

<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
          }
      }
}

希望能帮助到你！

于 2014-09-09T03:41:22.927 回答
2

我发现这很简单。它只使用引导程序和 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>

于 2018-04-05T19:58:24.717 回答