jQuery funktioniert nicht, nachdem Inhalt über AJAX geladen wurde

Auf dieser Seite habe ich ein jQuery-Popup-Fenster und in der Größe veränderbare Bilder. Wenn ich mit der Maus über die Vorschaubilder gehe, werden die Bilder perfekt skaliert. Auch wenn ich auf den großen gelben TV-Button “QuickBook TV” in der Fußzeile klicke, erscheint das Popup genau so, wie ich es möchte.

Wenn ich jedoch auf die Schaltflächen “Weiter” oder “Zurück” klicke, wird AJAX verwendet, um den neuen Inhalt zu laden, und meine jQuery funktioniert nicht mehr für die Popup- oder Miniaturbilder. Ich habe eine Reihe von Foren auf der Suche nach Informationen zu diesem Thema durchsucht, aber aufgrund der begrenzten Kenntnisse von jQuery konnte ich nicht verstehen, was ich tun muss.

Im Folgenden ist das Popup jQuery

$(document).ready(function() { $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); $(".inline").colorbox({ inline: true, width: "50%" }); $(".callbacks").colorbox({ onOpen: function() { alert('onOpen: colorbox is about to open'); }, onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, onClosed: function() { alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function() { $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); return false; }); }); 

Und das ist die Thumbnails jQuery

 $(function() { var xwidth = ($('.image-popout img').width())/1; var xheight = ($('.image-popout img').height())/1; $('.image-popout img').css( {'width': xwidth, 'height': xheight} ); //By default set the width and height of the image. $('.image-popout img').parent().css( {'width': xwidth, 'height': xheight} ); $('.image-popout img').hover( function() { $(this).stop().animate( { width : xwidth * 3, height : xheight * 3, margin : -(xwidth/3) }, 200 ); //END FUNCTION $(this).addClass('image-popout-shadow'); }, //END HOVER IN function() { $(this).stop().animate( { width : xwidth, height : xheight, margin : 0 }, 200, function() { $(this).removeClass('image-popout-shadow'); }); //END FUNCTION } ); }); 

jQuery-Selektoren wählen übereinstimmende Elemente aus, die im DOM vorhanden sind, wenn der Code ausgeführt wird, und sie werden nicht dynamisch aktualisiert. Wenn Sie eine function wie .hover() , um Ereignishandler hinzuzufügen, werden diese nur zu diesen Elementen .hover() . Wenn Sie einen AJAX-Aufruf ausführen und einen Abschnitt Ihrer Seite ersetzen, entfernen Sie diese Elemente mit den an sie gebundenen Ereignisbehandlungsroutinen und ersetzen sie durch neue Elemente. Selbst wenn diese Elemente jetzt mit diesem Selektor übereinstimmen, wird der Ereignishandler nicht gebunden, da der entsprechende Code bereits ausgeführt wurde.

Ereignishandler

Speziell für Event-Handler ( .click() ) können Sie Event Delegation verwenden, um dies zu .click() . Das Grundprinzip besteht darin, dass Sie einen Event-Handler an ein statisches Element binden, das alle dynamischen (AJAX-geladenen) Inhalte enthält. In der jQuery-Dokumentation können Sie mehr über die Ereignisdelegierung erfahren .

Für Ihren click Ereignishandler würde der aktualisierte Code wie folgt aussehen:

 $(document).on('click', "#click", function () { $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); return false; }); 

Das würde einen Ereignishandler an das gesamte Dokument binden (wird also nie entfernt, bis die Seite entladen wird), was auf click auf einem Element mit der id Eigenschaft click reagieren wird. Idealerweise würden Sie etwas näher an Ihren dynamischen Elementen im DOM verwenden (vielleicht ein

auf Ihrer Seite, das immer da ist und Ihren gesamten Seiteninhalt enthält), da dies die Effizienz ein wenig verbessert.

Das Problem tritt auf, wenn Sie jedoch .hover() müssen. Es gibt kein tatsächliches hover Ereignis in JavaScript, jQuery bietet diese function lediglich als praktische Abkürzung für das Binden von Event- mouseleave Ereignisse mouseenter und mouseleave . Sie können jedoch die Ereignisdelegierung verwenden:

 $(document).on({ mouseenter: function () { $(this).stop().animate({ width: xwidth * 3, height: xheight * 3, margin: -(xwidth / 3) }, 200); //END FUNCTION $(this).addClass('image-popout-shadow'); }, mouseleave: function () { $(this).stop().animate({ width: xwidth, height: xheight, margin: 0 }, 200, function () { $(this).removeClass('image-popout-shadow'); }); //END FUNCTION } }, '.image-popout img'); 

jQuery-Plugins

Das deckt die Event-Handler-Bindungen ab. Aber das ist nicht alles, was du tust. Sie initialisieren auch ein jQuery-Plugin (colorbox), und es gibt keine Möglichkeit, diese an Elemente zu delegieren. Sie müssen diese Zeilen einfach erneut aufrufen, wenn Sie Ihre AJAX-Inhalte geladen haben. Der einfachste Weg wäre, diese in eine separate benannte function zu verschieben, die Sie dann an beiden Stellen aufrufen können (beim Laden der Seite und in Ihrem AJAX-Request- success ):

 function initialiseColorbox() { $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); $(".inline").colorbox({ inline: true, width: "50%" }); $(".callbacks").colorbox({ onOpen: function () { alert('onOpen: colorbox is about to open'); }, onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); }, onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); }, onClosed: function () { alert('onClosed: colorbox has completely closed'); } }); } 

Hatte das gleiche Problem, bevor ich in der Lage war, die Lösung zu finden, die für mich funktionierte. Wenn also irgendjemand in Zukunft eine Chance haben könnte, mich zu informieren, ob es richtig war, da alle Lösungen, die ich finden konnte, etwas komplizierter waren.

Wie von Tamer Durgun gesagt, werden wir Ihren Code auch in ajaxStop platzieren, so dass Ihr Code jedes Mal wiederhergestellt wird, wenn ein Event von ajax abgeschlossen wird.

 $( document ).ajaxStop(function() { //your code } 

Arbeitete für mich 🙂

  // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC. $.ajax({ // get a form template first url: "../FPFU/templates/yeni-workout-form.html", type: "get", success: function(data){ // insert this template into your container $(".content").html(data); }, error: function(){ alert_fail.removeClass("gizle"); alert_fail.addClass("goster"); alert_fail.html("Template getirilemedi."); }, complete: function(){ // after all done you can manupulate here your new content // tinymce yükleme tinymce.init({ selector: '#workout-aciklama' }); } 

Ihre Ereignishandler gehen verloren, wenn Sie den Inhalt ersetzen. Wenn Sie hover Ereignisse festlegen, setzt jQuery diese auf die Ereignisse auf der aktuellen Seite. Wenn Sie sie also durch Ajax ersetzen, werden die Ereignisse nicht mit diesen Elementen verknüpft, da sie neu sind.

Um dies zu beheben, können Sie entweder die function aufrufen, die sie erneut bindet, oder stattdessen den Ereignishandler für das Dokument wie in dieser Antwort mithilfe von $ (document) .on festlegen

Auf diese Weise wird das Ereignis im Dokument festgelegt und alle neuen Elemente rufen das Ereignis auf.

Sie können die vollständige function von jQuery ajax verwenden, nachdem Sie das Datenformular irgendwo abgerufen haben. Es werden aktualisierte Elemente nach dem Ajax-Abschluss angezeigt

Sie können die delate () -Methode von jQuery verwenden, die einen Handler an ein oder mehrere Ereignisse für alle Elemente anfügt, die jetzt oder zukünftig mit dem Selektor übereinstimmen, basierend auf einer bestimmten Menge von Wurzelelementen. In meinem Fall funktioniert es wie erwartet

dies $(selector).click(function(e){}

wird dies nach Verwendung der delegate () -Methode

$( "body" ).delegate( "selector", "click", function(e) {}

Hoffe das wird helfen;)