JQuery: подтверждение нажатия кнопки

У меня есть следующие коды 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;
  });
});

Ответ 1

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

Затем удалите атрибут onclick из элемента HTML.

Ответ 2

Вы объявили свои события двумя способами. Один использует встроенный обработчик событий, а один использует JQuery. Они не реагируют одинаково на return false.

В обработчике событий JQuery return false оба останавливают распространение события на своих дорожках и предотвращают поведение по умолчанию, которое браузер применял. В регулярном встроенном обработчике событий он просто останавливает поведение по умолчанию. В случае с этой кнопкой, о поведении по умолчанию не существует. Это просто кнопка. Поэтому он счастливо возвращает false, если вы нажмете "Отмена", затем приступите к запуску следующего события JQuery.

Чтобы решить эту проблему, проще всего поставить всю логику в одном месте - либо в JQuery, либо в inline-событие, либо иметь встроенный вызов события, где вы выполняете всю логику.

Например:

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

Ответ 3

Возврат false в обработчике кликов для button (или input type="button") не имеет никакого эффекта, потому что по умолчанию не происходит остановки, например, с помощью кнопки input type="submit" или ссылки.

Удалите атрибут onclick в теге и вызовите confirm в обработчике jQuery:

$(document).ready(function() {

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

});

Ответ 4

Ok. Я понял это самостоятельно, прежде чем смотреть на любой из этих действительных ответов. Я просто собираюсь бросить шахту, чтобы кто-нибудь попытался:

ПЕРВЫЙ HTML

1st: Предположим, что это кнопка, которую вы представляете пользователю:

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

2nd: Теперь, только если пользователь нажимает кнопку #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
          }
      }
}

Надеюсь, что это поможет!