L'événement lors de l'élément ajouté à la page

Question

Ce problème a déjà été discuté ici: Comment faire une action lorsqu'un élément est ajouté à une page à l'aide de Jquery?

L'intervenant a suggéré de déclenchement d'un événement personnalisé chaque fois qu'un div a été ajouté à la page. Cependant, je suis en train d'écrire une extension Chrome et n'ont pas accès à la source de la page. Quelles sont mes options? Je suppose que dans la théorie, je pouvais setTimeout continuellement à la recherche de l'élément de la présence et de l'ajouter mon action si l'élément est-il.

Answer 1

Depuis DOM Mutation Événements sont désormais obsolète (voir note au bas) avec les dernières spécifications, et vous n'avez aucun contrôle sur les éléments insérés parce qu'ils sont ajoutées par quelqu'un d'autre code, votre seule option est de vérifier en permanence pour eux.

function checkDOMChange()
{
    // check for any new element being inserted here,
    // or a particular node being modified

    // call the function again after 100 milliseconds
    setTimeout( checkDOMChange, 100 );
}

Une fois que cette fonction est appelée, elle se déroulera tous les xxx millisecondes. - Je choisir 100, ce qui est 10 fois par seconde. Sauf si vous avez besoin en temps réel des éléments de capture, il devrait être suffisant.

Modifier

Comme l'a commenté Ben Davis, DOM de Niveau 4 spécification présente la Mutation des observateurs (également sur Mozilla docs), qui remplace le obsolète mutation des événements.

Answer 2

La réponse exacte est "l'utilisation de mutation observateurs" (comme indiqué dans cette question: Déterminer si un élément HTML a été ajouté au DOM de manière dynamique), toutefois, le soutien (plus précisément sur IE) est limitée (http://caniuse.com/mutationobserver).

Donc la réponse RÉELLE est "l'Utilisation de la mutation des observateurs.... finalement. Mais allez-y avec Jose Faeti de réponse pour l'instant" :)

Answer 3

Vous pouvez également exploiter CSS3 Animation d'événements afin d'être notifié lorsqu'un élément est ajouté au DOM: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Answer 4

Vous pouvez utiliser livequery plugin pour jQuery. Vous pouvez fournir un sélecteur d'expression tels que:

$("input[type=button].removeItemButton").livequery(function () {
    $("#statusBar").text('You may now remove items.');
});

Chaque fois qu'un bouton d'un removeItemButton de la classe est ajouté un message s'affiche dans une barre d'état.

En termes d'efficacité, vous pourriez voulez éviter cela, mais en tout cas vous pourriez tirer parti de l'plugin au lieu de créer vos propres gestionnaires d'événements.

Revisité répondre

La réponse ci-dessus est uniquement destinée à détecter qu'un élément a été ajouté au DOM à l'aide du plugin.

Cependant, le plus probable, jQuery.on() approche serait plus approprié, par exemple:

$("#myParentContainer").on('click', '.removeItemButton', function(){
          alert($(this).text() + ' has been removed');
}

Si vous avez du contenu dynamique qui doit répondre aux clics par exemple, il est préférable de lier les événements à un parent conteneur à l'aide de jQuery.on.

Answer 5

Il y a un prometteur appelé bibliothèque javascript Arrivée qui ressemble à un excellente façon de commencer à prendre avantage de la mutation des observateurs, une fois la prise en charge du navigateur devient monnaie courante.

https://github.com/uzairfarooq/arrive/