Wie können Sie überprüfen, ob ein jQuery-Plugin bereits an einen DOM-Knoten gebunden ist?

Lesezeit: 4 Minuten

Benutzer-Avatar
Xeoncross

Die meisten jQuery-Plugins sind an einen DOM-Knoten gebunden/gebunden, wenn Sie sie zum ersten Mal initialisieren.

$('#foo').bar({options: ...});

Wie können Sie überprüfen, welche Plugins oder Objekte derzeit an einen DOM-Knoten gebunden sind? #foo?

if($('#foo').bar)
if($.inArray('bar', $('#foo').eq(0)))
if($('#foo').eq(0).indexOf('bar'))
if($('#foo').hasOwnProperty('bar'))

Beispielsweise ist es möglich, die Ereignisse an ein solches Objekt zu binden

console.log($('#foo').data('events'));

  • Würde diese Antwort sicher gerne wissen. Es hilft beim Debuggen.

    – Pulkit Mittal

    30. Oktober 2012 um 16:43 Uhr

  • Wie genau würden Sie definieren an einen DOM-Knoten gebunden? Hinzufügen jquery-ui.js in Ihrer Seite und jedes Element wird haben .dialog(), .autocomplete() etc automatisch hinzugefügt. Sie werden gebunden jeder Knoten.

    – Salmann A

    30. Oktober 2012 um 17:29 Uhr


  • @SalmanA, ich meine nur, dass ein Plugin ein DOM-Element aktiv überwacht oder beeinflusst.

    – Xeoncross

    30. Oktober 2012 um 17:30 Uhr

Benutzer-Avatar
raina77ow

Es sei denn, das Plugin selbst hat eine Möglichkeit definiert, die Elemente, an denen es arbeitet, zu ändern, ist dies nicht möglich. Zum Beispiel:

$.fn.extend({
  foo: function() { console.log("I am foo!"); }
});

$('#bar').foo();

Hier habe ich ein vollständiges (naja, mehr oder weniger) jQuery-Plugin definiert, das nicht einmal versucht, mit seinem aufrufenden Element zu interagieren. Sie können es jedoch nach Belieben für jede jQuery-umschlossene Sammlung von Elementen wie jede jQuery-umschlossene Sammlung von Elementen verwenden hat diese Methode in ihrem Prototyp wegen dieser Zeile (von jquery.js):

jQuery.fn = jQuery.prototype = { ... }

… nach $.fn.extend wurde aufgerufen, dieses Plugin einzustecken, kein Wortspiel beabsichtigt.

Aber selbst wenn mein Plugin sein aufrufendes Element auf irgendeine Weise ändern müsste, wie hier:

$.fn.extend({
  bar: function() { this.html('I am all bar now!'); }
});
$('#bar').bar();

… Ich müsste dies im Grunde immer noch mit einigen externen Ereignissen (DOM-Mutationsereignissen) behandeln und nicht nur von einer internen jQuery-Protokollierung abhängen.

  • Dies ist sicherlich richtig (und vielleicht die Antwort), aber die meisten Plugins ändern das Element oder protokollieren eine Instanz wieder im Plugin-Objekt. Sie müssen eine Art generisches Eigentum hinterlassen, das zurückverfolgt werden kann. Vielleicht Veranstaltungen, Kurse, Ausweise, .dataoder etwas anderes.

    – Xeoncross

    30. Oktober 2012 um 17:13 Uhr

  • @Xeoncross Warum sollte es a sein generisch -Eigenschaft, wenn jQuery keine Einschränkungen bezüglich des Verhaltens des Plugins hat?

    – raina77ow

    30. Oktober 2012 um 17:16 Uhr

  • Vielleicht ist es besser als “allgemeiner Ort” für eine Immobilie zu sagen. Auf jeden Fall gibt es oft Muster, die Sie in solchen Situationen anwenden können, um Dinge zu erkennen. Zum Beispiel fügen viele Plugins etwas hinzu .data().

    – Xeoncross

    30. Oktober 2012 um 17:19 Uhr


  • @xeoncross: Was auch immer jQuery hinter den Kulissen tut, ist nicht dokumentiert, daher kann es sich ohne Vorankündigung ändern.

    – Salmann A

    30. Oktober 2012 um 17:20 Uhr

In meinem Fall fügt das Plugin, das ich zu erkennen versuchte, zufällig einige Daten zu den Elementen hinzu $(element).data() Laden. Ich habe auch gesehen, dass Plugins Klassen oder IDs mit entweder ihrem Namen oder Änderungen ihres Namens hinzugefügt haben.

Unten ist der Code, mit dem ich derzeit arbeite, um dieses Problem zu lösen. Funktioniert wahrscheinlich nicht für die meisten Plugins.

$.fn.extend({
    isPluginBound: function(pluginName)
    {
        if(jQuery().pluginName)
        {
            var name = pluginName.toLowerCase();

            return this.data(pluginName) || this.data(name)
                || this.attr('class').toLowerCase().indexOf(name) !== -1 // vs hasClass()
                || this.attr('id').toLowerCase().indexOf(name) !== -1;
        }
    }
});

Um es zu benutzen, rufen Sie einfach an $('#foo').isPluginBound('bar');

  • Vielleicht würde ich ersetzen if (jQuery().pluginName) mit if ($.fn[pluginName]) hier, aber das ist nur eine Randnotiz. Tatsächlich speichern jQuery-UI-Plugins ihre Namen in den betroffenen Elementen. dataso ist dein Ansatz wahrscheinlich für sie gültig. Allerdings verlässt man sich dabei auf Interna.

    – raina77ow

    30. Oktober 2012 um 17:49 Uhr


  • Und als weitere Randnotiz wäre es vielleicht nett, einen booleschen Wert von zurückzugeben isPluginBound jedenfalls (mit !!-zum Beispiel diesen Prüfausdruck umschließen).

    – raina77ow

    30. Oktober 2012 um 17:57 Uhr

  • Es lohnt sich immer, die .data() zu überprüfen, danke – hat mir geholfen!

    – iamkeir

    7. August 2015 um 21:54 Uhr

Soweit ich weiß, hängen alle jQuery-Widgets ihre Instanz an ihren DOM-Knoten an. Ich verwende in meinen Projekten die folgende Erweiterung. Es ist auch nützlich, eine Methode für ein Widget aufzurufen, dessen Namen Sie nicht kennen (zum Beispiel Aufruf einer Basismethode eines erweiterten Widgets).

// returns first found widget instance of the first element or calls method on first widget instance of all elements
$.fn.widget = function ( method , option, value ) { 
  var wi;
  // iterate all elements 
  this.each( function() {
    var wii;
    // iterate all attached data elements, look for widget instances
    $.each( $(this).data(), function( key, data ){ 
      if ( "widgetName" in data ){ wii = data; return false } 
    })
    // if there is a widget instance but no method specified
    if ( wii && !method ) {
      wi = wii;
      return false
    }
    // if there is a widget and there is an object found with the method as the key
    else if ( wii && ( method in wii ) ) {
      // if it is truly a method of that instance, call that instance
      if ( $.isFunction( wii[method] ) ) {
        wi = wii[method].call( wii, option, value )
      } 
      // else, it is maybe a value stored in the instance you seek?
      else {
        wi = wii[method]
      }
    }
  })
  return ( wi === undefined ) ? this : wi ;
}

1147980cookie-checkWie können Sie überprüfen, ob ein jQuery-Plugin bereits an einen DOM-Knoten gebunden ist?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy