IT-Swarm.Net

Ajax Modal flackert beim mehrmaligen Öffnen

auf meiner Wordpress-Site füge ich eine Schaltfläche hinzu, die beim Klicken ein Modal zum Öffnen über Ajax aufruft. Wenn ich beim erneuten Laden der Seite einmal auf die Schaltfläche klicke, scheint es ohne Probleme zu funktionieren. Wenn ich das Modal dann schließe und auf die Schaltfläche klicke, um es erneut zu öffnen, ohne die Seite zu aktualisieren, wird es geöffnet, aber flackert einmal und bleibt dann geöffnet. Wenn ich es wieder schließe und wieder öffne, flackert es 3-4 Mal, bevor ich offen bleibe. Und das geht mit mehr Flackern weiter, je mehr ich auf die Schaltfläche klicke.

jQuery(document).ready(function ($) {
// LAUNCH CALCULATOR/QUIZ MODAL
function qdLoadModal(){
    var options = {
            modal: true,
            height:300,
            width:500
        };

    $('#qdModalWindow').load('/wp-content/themes/gift/qdCalcModal.php');
    $('#qdModal').addClass('open');
    $('#qdModal').animate({
        opacity: 1.0,
    }, 250, function() {
        // Animation complete.
        //qdQuestionHeight();
    });


}

//Launch Quiz Modal
$('.calcLaunch').click(function( event ) {
    event.preventDefault();
    qdLoadModal();
});
});

Das ist die jQuery, mit der ich auf Knopfdruck in die modale Datei lade. Ich kann nicht herausfinden, warum der Modal das Flackern verursacht, wenn er mehrmals geöffnet wird, ohne die Seite neu zu laden. Wenn weitere Informationen zu meinem Code benötigt werden, kann ich sie bereitstellen, bin mir jedoch nicht sicher, wie ich sie beheben soll, nachdem ich einige Stunden lang versucht habe, Fehler zu beheben.

EDIT: Ich habe tatsächlich eine Lösung dafür gefunden. Ich habe die Klickfunktion folgendermaßen geändert:

    $('.calcLaunch').one("click", function( event ){
    event.preventDefault();
    qdLoadModal();
    });

Wenn Sie diese Funktion ändern, wird sie nur einmal ausgeführt, wenn Sie auf das Entfernen des Flimmerns klicken.

1
Logan C

Versuchen Sie, untergeordnete Elemente in #qdModalWindow zu entfernen, bevor Sie versuchen, neue Inhalte darin zu laden.

  $('#qdModalWindow').children().remove();
1
Vatsh Patel