Wie übergibt man Button in Jquery-Funktion?

Question

Ich verwende eine jQuery-Bibliothek von Drittanbietern namens jQquery.confirm. Es bietet Dialoge in jQuery. Auf eine Schaltfläche einer bestimmten Klasse zu klicken, möchte ich die confirm() Funktion verwenden, um auf die Bestätigung zu bringen:

$(".btn-danger").click(function(event) { 
    //Prevent the button from being clicked. 
    event.preventDefault(); 

    $.confirm({ 
     text: "Are you sure you want to delete that comment?", 
     confirm: function() { 
      //Code in here for button to be pressed 
     } 
    }); 
}); 

Das Problem, das ich habe, ist mit dem confirm: function(). Ich würde gerne simulieren, indem ich hier auf den Button klicke. Ich habe dies versucht, aber es scheint nicht, den Knopf zu erkennen, dass ich klicken müssen:

$(this).trigger("click"); 

Ich vermute, ich es als Argument irgendwo übergeben müssen?

Answer 1

Innerhalb der confirm Handler-Funktion bezieht sich der Geltungsbereich von this nicht auf die Schaltfläche, auf die geklickt wurde. Um dies zu beheben, müssen Sie einen Verweis auf die angeklickte Schaltfläche in einer Variablen außerhalb des confirm-Handlers speichern.

Beachten Sie jedoch, dass die Logik, die Sie erstellen, in einer Schleife endet; Sie klicken auf die Schaltfläche, zeigen die confirm und klicken Sie dann erneut auf die Schaltfläche programmgesteuert, die nur die confirm wieder und so weiter ad infinitum zeigt. Ich würde vorschlagen, dass Sie eine Funktion aufrufen zu tun, was in der confirm Aktion benötigt wird, wie folgt aus: Versuchen Sie folgendes:

$(".btn-danger").click(function(e) { 
    e.preventDefault(); 

    $.confirm({ 
     text: "Are you sure you want to delete that comment?", 
     confirm: function() { 
      actionWasConfirmed(); 
     } 
    }); 
}); 

var actionWasConfirmed = function() { 
    console.log('do something here...'); 
}; 

Answer 2

HTML-Code für den Button:

<button class="btn-danger" >Delete</button> 

Und Javascript Funktion

$(".btn-danger").click(function(){ 
if(confirm("Are you sure you want to delete that comment?")){ 
    //Code in here for button to be pressed 
    } 
}); 

Answer 3

Jede Event-Callback-Funktion empfängt einen Verweis auf das Ereignis, das sie ausgelöst hat. Sie sind bereits eingerichtet, um diese Referenz mit Ihrem Argument event zu erhalten. Über dieses Objekt können Sie auf das Objekt verweisen, das das Ereignis ausgelöst hat (was in Ihrem Fall der Button wäre). So konnten Sie nur dies tun:

$(".btn-danger").click(function(event) { 

    //Prevent the button from being clicked. 
    event.preventDefault(); 

    $.confirm({ 
    text: "Are you sure you want to delete that comment?", 
    confirm: function() { 
     event.target.trigger("click")" 
    } 
    }); 
}); 

Aber wie erwähnt wurde, wird ein Klick auf den Button würde einen weiteren Klick auf den Button mit der Bestätigung führen.

Da Sie bei der Bestätigung nur etwas löschen möchten, wäre es am besten, den Eintrag einfach zu löschen. Mit anderen Worten, trennen Sie Ihre Logik. Der Knopfklick sollte die Bestätigung auslösen und die Bestätigung sollte den Eintrag löschen, nicht erneut auf die Schaltfläche klicken.

$(".btn-danger").click(function(event) { 

    //Prevent the button from being clicked. 
    event.preventDefault(); 

    $.confirm({ 
    text: "Are you sure you want to delete that comment?", 
    confirm: function() { 
     // Delete the comment here, don't click more buttons. 
    } 
    }); 
}); 

Answer 4

Wenn Sie $(this) Sie müssen sicherstellen, dass Sie es in das richtige Objekt verwenden. Sie können $(this) innerhalb von $ (confirm) nicht verwenden und erwarten, dass Sie auf Ihre $(".btn-danger") verweisen. Stattdessen referenziert es auf $(confirm) statt Ihrer gezielten Schaltfläche.

Schauen Sie sich das folgende Arbeitsbeispiel an und fragen Sie, ob etwas unklar ist.

$(".btn-danger").click(function(e) { 
    e.preventDefault(); 
    // Here $(this) references the object you need clicked 
    var currentButton = $(this); 
    $.confirm({ 
     text: "Are you sure you want to delete that comment?", 
     confirm: function() { 
      // If you used $(this) here you referenced to your $(confirm) object 

      // Instead of a false $(this), use the button that actually triggered this code. 
      currentButton.trigger('click'); 
     } 
    }); 
}); 

Ich bin nicht sicher, ob dies ist, was Sie tun wollten, aber beachten Sie bitte den obigen Code Art einer Endlosschleife ist, denn wenn der Klick ausgelöst wird, diese ganze Code wird wieder aufgerufen werden. Deshalb, wenn Sie eine andere Taste, verwenden Sie den vollständigen Wähler davon, oder weisen Sie ihm eine eindeutige ID und wählen Sie sie aus, wie unten drücken wollte:

HTML-Code gezielte Taste:

<input type="button" value="Button To Be Clicked after Confirm" name="myButton" id="uniqueID_onWholePage" /> 

Aktualisiert jQuery-Code, der auf diesen Knopf drückt

$(".btn-danger").click(function(e) { 
    e.preventDefault(); 
    $.confirm({ 
     text: "Are you sure you want to delete that comment?", 
     confirm: function() { 
      $('#uniqueID_onWholePage').trigger('click'); 
     } 
    }); 
}); 

Answer 5

Dies ist ein Beispiel, das SweetAlert verwendet, die ein Ersatz f oder JavaScript integrierte Popup-Warnung. Wenn Sie SweetAlert noch nicht ausgecheckt haben, empfehle ich Ihnen dringend. It also integrates very well with Bootstrap.

Hier ist ein Arbeitsbeispiel (Sie können Vollbild für den vollen Effekt gehen). Leider können Sie den eigentlichen Sendevorgang nicht sehen, aber der Code sollte funktionieren, sobald Sie eine echte Aktion hinzugefügt haben.

$("form.confirm").find("[type=submit]").click(function(e) { 
 
    var $this; 
 
    e.preventDefault(); 
 
    $this = $(this); 
 
    return sweetAlert({ 
 
    title: "Are you sure?", 
 
    type: "warning", 
 
    showCancelButton: true, 
 
    confirmButtonColor: "#DD6B55", 
 
    confirmButtonText: "Confirm Delete", 
 
    closeOnConfirm: false 
 
    }, function() { 
 
    return $this.closest("form").submit(); 
 
    }); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form class="confirm" method="POST" action""> 
 
    <button type="submit">Submit</button> 
 
</form>