Wie re-attach jQuery-Funktionen nach dem AJAX-content laden?

Gibt es ein paar jQuery-UI-Funktionen, die ich nennen diesen Weg:

jQuery(document).ready(function(){
    jQuery(".accordion").accordion();
});

Aber meine Seite ist AJAX-basiert und einige Seiten verwenden, Akkordeon, einige können es nicht verwenden. Es gibt wie 30+ andere Funktionen müssten neu befestigt, die eine problematische Entwicklung Aufgabe. Gibt es eine clevere Möglichkeit dieses Problem zu beheben, so dass jeder neue .accordion wird diese automatisch angehängt?

Mögliche Lösungen und warum Sie nicht funktionieren:

auslösende Dokument bereit, AJAX-Aufruf Ende wäre ideal, aber das ist nicht möglich
mit load() ist keine option, da es ein CMS, wo Benutzer können die Installation von plugins - das bedeutet, dass unbekannte Anzahl von unbekannten Funktionen, plugins hinzufügen, die nur mit jQuery(document).ready();
re-attach-Funktionen auf ajaxComplete - mit einer unbekannten Anzahl von unbekannten Funktionen, dies wird nicht funktionieren ohne änderung der AJAX-Skript jedes mal, wenn Sie installieren oder deinstallieren ein jQuery-plugin,

Sind Sie Aufbau einer single page Web-App? Haben Sie sich überlegt ein framework wie Backbone?
Vorsichtig aufrufen $(".accordion").accordion() mehrmals, da plugins nicht unbedingt behandeln mehrere Initialisierungen auf das gleiche element richtig. Um auf der sicheren Seite zu sein, empfehle ich zur Ruhigstellung der Aufruf, auf die neuen Inhalte z.B. nur $("#newContent .accordion").accordion()
Gute Idee!

InformationsquelleAutor Atadj | 2013-02-04

4

Können Sie die DOMNodeInserted Ereignis, und überprüfen Sie die accordion-Klasse.
```
document.addEventListener('DOMNodeInserted', function(e) {
    var el = $(e.target);
    if(el.hasClass('accordion')) {
        el.accordion();
    }
});
```
Beispiel für die Verwendung von DOMNodeInserted: http://jsfiddle.net/qErHs/
- Ich mag diese Lösung sehr viel 🙂 Aber ich kam zu dem Schluss, dass es einfacher sein, einfach deaktivieren AJAX. Es wird optisch schlechter aber technisch besser.
- FYI DOMNodeInserted ist veraltet und seine Verwendung wird abgeraten, aufgrund der Auswirkungen auf die Leistung und cross-browser-Kompatibilität Probleme, siehe: developer.mozilla.org/en-US/docs/DOM/Mutation_events
- nicht Graben, ajax, dein workaround kann so einfach wie das schreiben einer generischen contentReloaded Funktion initialisiert alle notwendigen plugins, und dann rufen Sie immer auf die komplette/success callback von jedem ajax-callback. Dies ist, was ich normalerweise tun, ist es nicht besonders schwer zu mantain und es funktioniert. (Sie hätte sich zu erinnern, Sie zu aktualisieren, wenn Sie neue plugins)
InformationsquelleAutor Jeff-Meadows
3

Ich habe ein ähnliches Problem mit jQuery-widgets. Was ich Tat, war die Verwendung der ajaxComplete Methode zum befestigen des widgets.
```
$(document).ajaxComplete(function()
    {
        $(".accordion").accordion();
    });
```
so, die Funktion wird jedesmal aufgerufen, wenn eine AJAX-Methode abgeschlossen ist, und werden befestigen das Akkordeon, um alle neuen Elemente mit der Klasse Akkordeon
- Danke für die Antwort aber das ist genau das, was ich vermeiden will 🙂 ich weiß einfach nicht, wie viele Funktionen und welche Funktionen müssen angebracht werden, da, die sich dynamisch ändert... Ideale Lösung wäre, um die trigger - document ready - dies würde für alles was ich brauche, aber das ist nicht möglich.
- nicht sicher, wenn es jedem besser, aber was ich Tat, bevor ajaxComplete war, haben inline-JS in dem, was war, zurück durch den AJAX-Aufruf, um bestimmte jQuery-Zeug für die HTML zurückgegeben
- Sie wickeln konnte Ihrem Dokument.bereit, in einer separaten Funktion (sagen wir startUI()) und dann rufen Sie beide auf dem Dokument.bereit, und wenn ajax-Aufrufe erfolgt sind. Aber es ist wahrscheinlich eine bessere Idee Griff Dokument.bereit und Inhalt neu laden getrennt.
- Ich sehe, was du meinst. Vielen Dank für Eure Vorschläge, in der Tat, dass ist eine andere gute Idee 🙂 Aber ich glaube, es ist keine elegante und perfekte Lösung für das, was ich Suche, so werde ich diese einfach deaktivieren AJAX.
InformationsquelleAutor ShaneA
1

http://api.jquery.com/on/

"Delegiert Veranstaltungen haben den Vorteil, dass Sie verarbeiten Ereignisse aus den untergeordneten Elementen Hinzugefügt werden, um das Dokument zu einem späteren Zeitpunkt."
```
jQuery(document).on("change", ".accordion", function() {
  jQuery(".accordion").accordion();
});
```
- Danke! Das ist ein Erster Vorschlag, der fix zumindest ein Teil der Funktionen 🙂 Aber dein Beispiel sollte so sein: jQuery(document).on('click', '.selector', function(){}); weil on() funktioniert dieser Weg nur dann.
- Und... es sollte nicht passieren, klicken Sie aber auf element Auftritt.
- Du hast Recht. Ich warf, dass als ich war immer gepingt bei der Arbeit. Sorry. Ich aktualisiert meine Antwort und wechselte zu ändern().
- Danke! Das ist definitiv eine gute Lösung, aber ich kam zu dem Schluss, dass es einfacher sein, einfach deaktivieren AJAX. Es wird optisch schlechter aber technisch besser.
InformationsquelleAutor isherwood
0

Können Sie das Häkchen für ".Akkordeon"-Länge. Einfach eine Funktion erstellen...
```
function init_accordeon(){
    if($('.accordeon').length) {
        $(".accordon").accordeon();
    }
}
```
und als rufen Sie diese Funktion auf, nachdem Ihre ajax_calls.
- Dieses mal 30 Funktionen ist nicht das, was ich Suche. Ich brauche es automatisch geschehen. Wie mit load().
- Du brauchst nur 1 Funktion. Bitte überprüfen Sie api.jquery.com/ajaxComplete rufen Sie es jedes mal, wenn Ihr ajax_request finishs
- Ja, aber ich will nicht zu nennen, etwas nach AJAX-request abgeschlossen ist. Ich habe unbekannte Anzahl von unbekannten Funktionen im Dokument bereit (Benutzer können eigene Funktionen), so müsste er auch ändern ajaxComplete jedes mal, wenn er registriert eine neue jQuery-plugin.
- also ich habe eine if-Anweisung, die überprüft '.Akkordeon'. Durch die Art und Weise. Müssen Sie init ein plugin, wenn Ihr dom verpasst. Wenn Sie nicht wollen, dass diese, versuchen, es zu lösen, über iframes
InformationsquelleAutor mr_app

können Sie anwenderdefinierte Ereignisse nach dem ajax-Aufruf.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

<script>
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>

</body>
</html>

InformationsquelleAutor Ahmad Moussa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.