jQuery: Wie Sie eine jQuery-plugin-Funktion auf ein element, das bisher noch nicht Hinzugefügt wurden, um den DOM?

Ich habe ein jQuery-plugin, das ich verwende:

$(document).ready(function(){
    $('.elements').fancyPlugin();
});

Dies funktioniert gut, bis ich starten Sie das hinzufügen neuer Elemente:

$.get('ajax.html', function(data){
    $('#container').html(data);
});

Konnte ich rufen Sie die plugin-Funktion wieder wie diese:

$.get('ajax.html', function(data){
    $('#container').html(data).find('.elements').fancyPlugin();
});

...außer, dass die AJAX passiert im inneren ein weiteres jQuery-plugin, das nicht sollte, um zu wissen, über die fancyPlugin().

Wie kann ich dieses plugin für alle aktuellen und zukünftigen Elemente?

  • ok ok ok, ich weiß, dieser...... hrmmmm... ok, vielleicht nicht komplett, aber Sie sollten Sie verwenden einen Ereignis-listener. Ich würde binden DOMNodeInserted auf das Dokument, und rufen Sie die Funktion dann.
InformationsquelleAutor Andrew | 2011-07-21
  1. 15

    Ich denke, das funktioniert in allen Browsern außer dem IE:

    document.body.addEventListener("DOMNodeInserted", function(event){
    var $elementJustAdded = $(event.target);
    if ($elementJustAdded.hasClass('elements')) {
        $elementJustAdded.fancyPlugin();
    }
}, false);
    InformationsquelleAutor Paul
  2. 11

    Anderen Weg, dies zu tun ist, erstellen Sie Ihre eigene event :

    var container=$('#container');
$.get('ajax.html', function(data){   
   container.html(data);
   $('.elements',container).trigger('added.yourns');    
});

container.on('added.yourns','.elements',function(){
  $(this).fancyPlugin();
});

    Dann, wenn die Zugabe von ellements, einfach trigger-Ereignis mit der trigger Methode!

    var aDiv=$('div');
aDiv.appendTo(someNode);
aDiv.trigger('added.yourns');

    Tun, so wird es Ihnen ermöglichen, legen Sie das Verhalten in der javascript-Datei !

    • Der Mensch, von ganzem Herzen, danke danke danke 🙂
    • Sie beantwortet eine Frage, die für mich, die stecken in meinem Kopf für Monate...und heute hab ich einfach gebraucht. Sie machte jemanden glücklich, cheers :))))))))))))))))
    • Das ist toll, geholfen zu lösen etwas, das ich baute. Danke!
    • Was hat das zu lösen? Wenn ich schließlich einen Anruf aDiv.trigger('added.yourns');, warum konnte ich nicht einfach anrufen .fancyPlugin() auf der neu geladenen Knoten? Wir müssen uns NICHT anrufen, nichts jedes mal, wenn ein neuer Knoten Hinzugefügt werden; das ist der ganze Sinn dieser Frage, oder bin ich etwas fehlt?
    • Wenn Sie änderungen an der gleichen DOM-element in vielen Orten, Sie suchen für Probleme ! Was es nicht zu lösen ist, dass Sie hören können, auf das Ereignis zu nennen, alle plugins, die Sie brauchen, und nicht nur eine! Sie haben möglicherweise andere Handler, die den neuen Wert zu Lesen oder andere ausgefallene Sachen. Wie Sie sehen können, es hat seine nutzt den Fällen, da sonst andere Menschen nicht haben sich bei mir bedankt 😉
    InformationsquelleAutor programaths
  3. 2

    Wenn diese Elemente Hinzugefügt werden, mit AJAX können Sie mit der .ajaxSuccess() Methode:

    $('#container').ajaxSuccess(function(result) {
    $('.elements').fancyPlugin();
});

    Und hier ist ein live-demo.

    • Seien Sie vorsichtig: "Wie jQuery 1.8, das .ajaxSuccess () - Methode sollte nur beigelegt werden, zu dokumentieren." api.jquery.com/ajaxsuccess
    InformationsquelleAutor Darin Dimitrov
  4. 0

    Haben Ihre AJAX-handler trigger einige benutzerdefinierte Ereignis wie contentAdded, und binden fancyPlugin zu diesem Ereignis.

    Alternativ können Sie DOM-mutation-events zu nennen fancyPlugin für jede änderung in den container. Native browser-Unterstützung ist nicht ganz dort noch, aber es gibt plugins, die sollten sich darum kümmern.

    InformationsquelleAutor Tgr
  5. 0

    Interessant. Im wesentlichen, Sie würde gerne so etwas wie:

    $('selector').ready( ... do something ... );

    Das problem ist, dass Art von Logik ist nicht verfügbar. Elemente laden auf der Seite nicht auslösen, die bestimmte Ereignisse, die ich bin mir dessen bewusst, dass Sie nur Erben CSS aus dem DOM-Knoten über Ihnen. Was ich tun würde, ist einfach, aus der $.get Erfolg Funktion, lösen Sie ein benutzerdefiniertes Ereignis. Der rest des Codes einbinden können, in diese Falle zu tun, alle plugins nachladen arbeiten, die nötig sein könnten. Sie übergeben eine Liste von relevanten Selektoren mit dem Ereignis, und verwenden Sie diese zum aufrufen des entsprechenden plugins (Sie können einen Satz von selector -> plugin refresh function Beziehungen in einer hashtable)

    InformationsquelleAutor Milimetric
  6. -1

    Haben Sie schaute auf die jQuery .live-event-handler? Es bindet automatisch, wenn ein neues Element Hinzugefügt, um den dom, wenn es die spezifizierten Anforderungen erfüllt.

    http://api.jquery.com/live/

    InformationsquelleAutor WDuffy
  7. -1

    Was ist, wenn Sie so etwas wie dies?

    $(document).ready(function(){
    $('.elements').live('load', function () {
        $(this).fancyPlugin();
    })
});

    Die Ereignisse werden nicht erneut gebunden, nachdem ajax-Aufrufe oder innerhalb der Inhalte, die Sie zurückgeben. live() fügt einen handler für das Ereignis jetzt und in der Zukunft."

    InformationsquelleAutor spliter
Schreibe einen Kommentar