J'aimerais déclencher un événement lorsqu'un élément est ajouté au document. J'ai lu le jQuery Documentation pour ON () et le Liste des événements mais aucun des événements ne semble préoccuper la création d'éléments.
I DO Monitez le DOM car je ne contrôle pas lorsque l'élément est ajouté au document (comme mon JavaScript est un script de contenu d'extension chrome)
4 Réponses :
Pour l'option la plus simple, vous voudrez peut-être examiner LiveQuery qui est effectivement l'écoute de l'auditeur de DOM 'que tu es après. Il devrait être utilisé avec prudence cependant, car il a le potentiel d'être assez lourd, de la performance.
Si vous préférez «rouler votre propre» - avec .on (), il doit fonctionner pour tous les éléments actuels et futurs - mais les éléments ajoutés devraient correspondre au sélecteur. Par exemple, si vous filez un événement jusqu'à toutes les classes de .MyClass et vous avez ensuite injecté un nouvel élément de la même classe sur le DOM, l'événement devrait tirer. Effectivement, le .on () API Rolls-up Bind / Live / Délégué des versions antérieures de JQuery, dont ces deuxièmes travaillent contre les éléments de Dom actuels et futurs.
Merci @spacebison. Qu'est-ce qui allait rouler ma propre utilisation sur () impliquer? Je suis heureux d'utiliser LiveQuery si c'est nécessaire mais je voudrais éviter les plugins si possible.
Si vous souhaitez avoir événements personnalisés qui déclenche lorsqu'un article est ajouté, suivez la réponse de Luiz Fernando - si vous souhaitez simplement utiliser les événements intégrés , mais avoir Les tirent lorsqu'un élément est créé, vous aurez besoin d'un sélecteur qui correspond aux éléments qui existaient déjà et qui seront créés et les câblent à l'aide de sur () - tant que les nouveaux éléments correspondent Le sélecteur L'événement déclenchera pour tout élément ajouté ainsi que préexistant.
En complément de la réponse de @ Spacebison, vous pouvez créer vos propres événements lorsque vous créez ces éléments. Par exemple: exemple en direct: http://jsfiddle.net/9nsah/ < / a> mais bien sûr, il est utile que lorsque vous créez vos propres éléments.
Comme mentionné, je ne crée pas mes propres éléments, alors tirant ainsi un événement lorsque je crée l'élément n'est pas une option.
La meilleure solution à ceci est l'observateur de mutation API API, pour lequel le Résumé de la mutation fournit une interface conviviale.
Ceci est tellement incroyablement utile pour les extensions de chrome. Merci beaucoup!
Pour ceux qui veulent un code rapide pour aller: Stackoverflow.com/Questtions/19150450/... Combinez la question et réponse acceptée pour le code de travail.
Je sais que c'est une vieille question qui a déjà une réponse, mais comme les choses ont changé, je pensais ajouter une réponse mise à jour pour les personnes atterrissantes sur cette page à la recherche d'une réponse.
Le déprécié fort> On devrait utiliser le nouveau mutationObserver API strong>, qui est également plus efficace. Exemple d'utilisation: P> DOM code>): P>
Cette fonctionnalité a été supprimée du Web. Bien que certains navigateurs puissent toujours l'appuyer, c'est en train d'être abandonné. Ne l'utilisez pas dans des projets anciens ou nouveaux. Les pages ou les applications Web à l'aide de cela peuvent se casser à tout moment. P>
BlockQuote>
(Le // Create an observer instance.
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log(mutation.type);
});
});
// Config info for the observer.
var config = {
childList: true,
subtree: true
};
// Observe the body (and its descendants) for `childList` changes.
observer.observe(document.body, config);
...
// Stop the observer, when it is not required any more.
observer.disconnect();
Non c'est bien! Je déteste que Stackoverflow devient si obsolète avec Web Tech. J'ai marqué cela comme la réponse acceptée.