L'ajout de classes CSS pour créé dynamiquement les éléments avec jQuery

Permettez-moi d'illustrer ma question: j'ai un externe bibliothèque JavaScript qui crée certains éléments HTML, pour moi, de façon dynamique, basée sur la saisie de l'utilisateur et de l'interaction, et je suis à la recherche d'écrire un script qui permettrait d'ajouter automatiquement une certaine classe de ces créé dynamiquement des éléments. Supposons aussi que je suis incapable de modifier le JavaScript externe de la bibliothèque que j'utilise.

Est-ce élégamment possible? Si oui, comment? Si non, serait-ce un effet secondaire de la mauvaise mise en œuvre de la conception?

J'y ai pensé en quelque sorte la surveillance du DOM pour voir quand il a été mis à jour, et en ajoutant les classes de ces nouveaux éléments, mais cela semble fastidieux et probablement inutiles.

Merci d'avance pour toutes vos idées /solutions!

Edit:

Comme demandé, voici un exemple simplifié de ce que je suis en train d'accomplir avec un exemple de code:

//function in external library, assume it cannot be edited!
function addElement() {
    $('body').append($('<div class="newly_created_element"></div>'));
}

//my code, looking to add the class name to the newly-created elements
//from the external function above...
//pseudo-coded as I have no idea how to do this!
$(function(){
    when (new element added) {
        add class "my_own_class";
    }
});

J'espère que cela a du sens!

Poster un exemple de code/plus en détail de la façon dont cela fonctionne actuellement?
si la troisième partie de la bibliothèque n'est pas de fournir un quelconque des événements personnalisés, alors il est difficile
Une bonne API permet de définir une fonction de rappel, qui, par exemple, est appelée pour chaque élément après sa création.
vous pouvez avoir un butin à mutation événements mais IE n'est pas là pour IE < 9
Peut-être que sat est de travail. $("l'élément-racine").bind(DOMSubtreeModified,"CustomHandler"); trouve ici stackoverflow.com/questions/9488653/...

OriginalL'auteur Chris Kempen | 2013-09-24

10

Vous pouvez faire quelque chose comme:
```
$("body").bind("DOMNodeInserted", function() {
   $(this).find('.newly_created_element').addClass('my_own_class');
});
```
Voir plus sur DOMNodeInserted ici

Utile, merci! Je suis seulement préoccupé par IE soutien et des remarques à faire, et, éventuellement, de l'efficacité... +1
l'Événement en question a DOMNodeInserted est maintenant obsolète.

OriginalL'auteur MaVRoSCy
4

Salut j'ai fait un jsfiddle de traiter votre problème. Le clic sur le bouton permet de simuler l'externe de la bibliothèque de l'ajout d'un élément. Sans lien avec le bouton cliquez sur je suis à l'écoute sur DOMNodeInserted. Si il y a quelque chose inséré dans le dom de la classe est ajouté. Vous pouvez facilement modifier le script pour ajouter une classe à certains éléments.

http://jsfiddle.net/kasperfish/AAd8f/
```
$(function() {
    $('#btn').click(function(){
        $('body').append('<div style="width:30px;height:30px;border:1px solid black"></div>');
    });


    $(document).on('DOMNodeInserted', function(e) {

        $(e.target).addClass('blue');
    });


});
```
Merci de fournir un violon pour cette kasper, même si je suis encore un peu hésitant à utiliser la mutation des événements quand IE est incertain de ses capacités...bonne suggestion!
il est un plugin jquery qui pourrait vous aider. jetez un oeil ici: stackoverflow.com/questions/3900151/... cependant je ne sais pas comment le plugin fonctionne :-/
Il semble que le plugin n'est plus disponible, mais elle n'a semblé déclencher sur jQuery événements...pas mal si elle était toujours là 🙁

OriginalL'auteur kasper Taeymans
1

Il y a sûrement un wrapper de la classe ou l'id de la bibliothèque à l'utilisation que vous pouvez utiliser aussi.
Ajoutez simplement le style css pour que le wrapper. Je n'ai jamais trouvé une bibliothèque où je n'arrivais pas à accrocher c'est classe wrapper/id définition.

À défaut, vous avez besoin d'agir sur les modifications apportées par ce script.
Éventuellement par l'ajout d'un écouteur à une interaction avec l'utilisateur ou, comme vous l'avez dit, un DOM mise à jour. Peut-être que vous pouvez ajouter un écouteur ou de rappel externe sur le script lui-même.

Je pourrais donner une réponse plus précise sur que si j'en savais plus sur le script externe.

Au sujet de votre extrait de code:
vous pouvez écouter les DOM mises à jour comme ceci
$(".newly_created_element").bind(DOMSubtreeModified, function() { this.addClass('class'); });

Vous avez raison, il y a un wrapper, mais d'ajouter de la gêne que je suis en train d'ajouter des Twitter Bootstrap classes CSS pour les boutons qui sont ajoutés dynamiquement, et je ne voulais pas copier / coller les informations de style dans le wrapper. En ce qui concerne le script externe, c'est quelque chose que j'ai écrit, mais est largement utilisé au sein de mon organisation à partir d'un CDN et ne peut pas être modifié. Confiance moi l'envie de repousser les limites...des suggestions utiles si, je vous remercie!
Outch, je comprends votre problème.. Difficile. Ma prochaine imagine interaction de l'utilisateur. C'est le code de mise à jour toujours initiée par une interaction de l'utilisateur? Ou par un intervalle de temps régulier? Vous pouvez ramasser et évaluer les classes (ex. $("trigger").on('click', function($('.newly_created_element').addClass('bootstrap classes')))};
Toujours par l'interaction de l'utilisateur, mais c'est difficile de dire quand les éléments sont effectivement ajouté au DOM, d'où mon actuellement l'amincissement des cheveux... 😉
Une finale essayer: Utilisez less/sass mixin pour étendre vos classes de bootstrap classes avec Less/Sass. Ex (au moins): .newly_created_element { .btn; .btn-large; }. Bonne chance

OriginalL'auteur hvgeertruy
0

Si j'étais vous, je voudrais utiliser les événements. jQuery facilite. Voici les trois premiers liens de Google: http://www.sitepoint.com/jquery-custom-events/, https://stackoverflow.com/a/14840483/993216, http://api.jquery.com/trigger/.

Dans un module de charger les données à partir du serveur, peut-être, le traiter et le déclenchement de l'événement. Dans un autre module, vous pouvez écouter cet événement et de faire tout ce dont vous avez besoin. À mon avis c'est la meilleure approche. C'est très agile façon de construire et de l'application, car vous pouvez ajouter un autre modules.

Merci pour ce Ivan, encore des suggestions utiles pour tout le monde, mais comment pourrais-je déclencher les événements que j'ai créé sans modifier le fichier de script externe?
Oh, je m'en excuse. J'ai été inattentif quand j'étais à la lecture de votre question. 🙁 Dans votre cas, pour sûr, DOM mutation des événements est la bonne solution. updates.html5rocks.com/2012/02/...

OriginalL'auteur Ivan Demchenko
0

Par souci de rigueur et d'apporter une réponse claire à ma question à la lumière, ci-joint ma conclusion. Merci à tous pour vos idées et de vos suggestions, j'ai appris beaucoup de choses et clairement les gens à réfléchir!

D'abord j'ai été en espérant pour un merveilleux fonction jQuery que j'avais peut-être négligée, quelque chose le long des lignes de:
```
$("#parent-element").monitorDom(function(added_element){ ... });
```
...mais il n'est tout simplement pas quoi que ce soit, ce qui est probablement une bonne chose parce que je crois que je suis tombée sur la mauvaise conception du code, et en permettant des crochets et des rappels est une meilleure façon d'aller. I. e.: l'utilisation de petits, établir et de tester les blocs de construction au lieu d'essayer de sur-ingénieur de quelque chose.

Si vous n'avez pas de soins sur l'appui d'Internet Explorer et c'est bizarreries, vous pouvez certainement regarder le obsolète mutation événements, le remplacement de la MutationObserver. C'est aussi un des décemment répondre à la question avec l'utilisation de mutateurs: Est-il un JavaScript/jQuery DOM changement écouteur?

En un mot, comme de ce post, il n'est pas intégré dans la fonction jQuery pour surveiller les DOM changements, et dans mon cas, mon problème peut être résolu avec une meilleure conception de code. Merci à vous tous pour toutes ces réponses, et nous allons continuer à pousser les limites!

OriginalL'auteur Chris Kempen

-2

Cela fonctionne fo moi, je continue à vérifier si cette catégorie existe ou pas ,une fois qu'il se trouve ,l'intervalle de la fonction s'arrête

var interval=setInterval(function(){ 
    if($('._icon').children().hasClass('_share')){
      clearInterval(interval);
    }else $('._icon').children().addClass('_share');
}, 1000);

OriginalL'auteur manish

Vous devez vous connecter pour publier un commentaire.