web-dev-qa-db-fra.com

Sélecteur JQuery sur un élément ajouté dynamiquement

Je ne peux pas comprendre comment amadouer JQuery pour sélectionner un élément (pas des gestionnaires de liaison) qui est inséré dynamiquement dans le DOM après le chargement de la page.

Par exemple:

Si j'ai du HTML:

<div id="bar">
 World!
</div>

Ensuite, je crée un nouvel élément et l'insère dans DOM:

var foo = '<div id="foo">Hello</div>';
$("#bar").before(foo);

Je me retrouve avec ceci:

<div id="foo">Hello</div>
<div id="bar">
 World!
</div>

Plus tard, je pourrais vouloir faire quelque chose de différent avec l'élément que j'ai inséré, en utilisant JQuery pour manipuler ce nouvel élément. Mais si j'essaye de faire:

myHappyEl = $("#foo");

Alors myHappyEl ne sera pas défini. JQuery ne le voit pas, probablement parce qu'il est attaché après le chargement de DOM.

J'ai vu de nombreuses suggestions abordant un problème éventuellement lié mais subtilement différent, dans lequel la solution consiste à utiliser .live () /. On () pour attacher un écouteur d'événements lorsqu'un élément se présente. Ce serait génial si je voulais capturer un événement de clic ou quelque chose, mais je ne le fais pas; Je veux pouvoir sélectionner les éléments ajoutés dynamiquement.

jqueryselector
23
Gustavo

Vous devrez assigner cette variable après que l'élément a été inséré, comme ceci:

var myHappyEl = $("#foo"); //Nothing, it isnt there
var foo = '<div id="foo">Hello</div>';
$("#bar").before($(foo));
myHappyEl = $("#foo");

Sinon, l'élément n'existe pas sur la page.

4
tymeJV