jquery.initialize Télécharger - jquery.initialize Téléchargement du code source

jquery.initialize

Autres catégories

1.2.0

Télécharger

Note de l'auteur (pie6k). J'ai créé cette bibliothèque il y a quelques années et c'était sympa à l'époque. Maintenant, vous ne devriez probablement pas utiliser jQuery pour des choses comme ça et opter pour React ou quelque chose de similaire. Merci. — 2018-11-21

Les rapports de bogues sont toujours acceptés.

jQuery.initialiser

Le plugin jQuery.initialize est créé pour aider à maintenir les éléments créés dynamiquement sur la page.

Synopsis

jQuery.initialize parcourra chaque élément qui correspond au sélecteur et appliquera la fonction de rappel. Il écoutera ensuite toutes les modifications apportées au modèle objet du document et appliquera la fonction de rappel à tous les nouveaux éléments insérés dans le document qui correspondent au sélecteur d'origine.

 $.initialize([selector], [callback]);

Cela permet aux développeurs de définir un rappel d'initialisation qui est appliqué chaque fois qu'un nouvel élément correspondant au sélecteur est inséré dans le DOM. Cela fonctionne également pour les éléments chargés via AJAX.

Démo simple - cliquez ici

Exemple d'utilisation

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
});

Mais maintenant, si un nouvel élément correspondant au sélecteur .some-element apparaît sur la page, il sera instantanément initialisé. La façon dont le nouvel élément est ajouté n'est pas importante, vous n'avez pas besoin de vous soucier des rappels, etc.

 $("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!

Ne pas observer

Pour cesser l'observation du document, vous pouvez déconnecter l'observateur en disconnect() sur l'instance MutationObserver renvoyée, ce qui l'empêche de recevoir d'autres notifications jusqu'à ce que observe() soit à nouveau appelée. . Par exemple,

 var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();

Possibilités

`target`

Par défaut, l'intégralité du document est observée pour les modifications. Cela peut entraîner de mauvaises performances. Un nœud spécifique dans le DOM peut être observé en spécifiant une cible :

 $.initialize(".some-element", function() {
    $(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });

Sinon, la cible sera par défaut document.documentElement .

`observer`

Un MutationObserverInit personnalisé peut être fourni. S’il n’est pas fourni, la configuration interne sera utilisée par défaut.

Compatibilité du navigateur

Le plugin est basé sur MutationObserver . Il fonctionnera sur IE9+ ( lire la note ci-dessous ) et sur tous les navigateurs modernes.

Remarque : Pour que cela fonctionne sur IE9 et IE10, vous devrez ajouter le polyfill MutationObserver - comme ceux ici : https://github.com/webcomponents/webcomponentsjs

Test de performances (merci à @bezborodow et @liuhongbo )