jQuery: Button Klickbestätigung

Question

Ich habe die folgenden HTML- und Jquery-Codes zum Löschen eines Mitgliedskontos mit Bestätigung. Aber der Code scheint nicht zu funktionieren: Selbst wenn ich im Pop-up-Fenster auf "Abbrechen" klicke, wird die Anfrage trotzdem gesendet und das Konto gelöscht. Wie soll ich das korrigieren? Vielen Dank.

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

Dann Onclick Entfernen aus dem HTML-Element-Attribut.

Answer 2

Sie haben Ihre Ereignisse auf zwei Arten deklariert. Einer verwendet einen Inline-Ereignishandler und einer verwendet JQuery. Sie reagieren nicht auf die gleiche Weise auf return false.

In einem JQuery-Ereignishandler return false stoppt sowohl die Ausbreitung der Veranstaltung in seinen Spuren und verhindert das Standardverhalten der Browser angewendet hätte. In einem regulären Inline-Ereignishandler wird nur das Standardverhalten gestoppt. Bei dieser Schaltfläche gibt es kein Standardverhalten, von dem gesprochen werden kann. Es ist nur ein Knopf. Daher gibt es glücklicherweise wieder false zurück, wenn Sie auf "Abbrechen" klicken und dann das nächste JQuery-Ereignis ausführen.

Um dieses Problem zu beheben, ist es wahrscheinlich am einfachsten, die gesamte Logik an einem Ort zu platzieren - entweder JQuery oder im Inline-Ereignis oder das Inline-Ereignis ruft eine Funktion auf, in der Sie die gesamte Logik ausführen.

Zum Beispiel:

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

Answer 3

Rückkehr false in einem Klick-Handler für ein button (oder ein input type="button") hat keine Auswirkung, da kein Standardverhalten, wie mit einem input type="submit" Knopf oder einem Link zu stoppen ist.

Entfernen Sie das onclick Attribut in dem Tag und confirm in den Klick-Handler jQuery nennen:

$(document).ready(function() { 

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

}); 

Answer 4

Ok. Ich habe es selbst herausgefunden, bevor ich mir eine dieser gültigen Antworten angesehen habe. Ich werde einfach meine werfen für jedermann zu versuchen:

ZUERST DER HTML

1. Platz: Angenommen, dies ist die Taste Sie dem Benutzer präsentieren:

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

2. : Jetzt, nur wenn der Benutzer auf die Schaltfläche #btn_to_check klickt, präsentieren Sie sie mit einem Bestätigungsfenster mit zwei Schaltflächen, um ihre Absicht zu bestätigen (dh akzeptieren und zurückgehen):

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

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

Hoffe, es hilft!