web-dev-qa-db-fra.com

Obtenir l'accès à un élément jquery qui vient d'être ajouté au DOM

J'ajoute simplement un élément qui est sur le DOM comme:

$("#div_element").append('<a href="#">test</a>');

Juste après l'avoir ajouté, j'ai besoin d'accéder à l'élément que je viens de créer pour lui associer une fonction de clic, j'ai essayé:

$("#div_element").append('<a href="#">test</a>').click(function(){alert("test")});

Mais ce qui précède n'a pas fonctionné. Je pourrais identifier l'élément de façon unique, mais cela semble un peu trop de travail quand il y a peut-être un moyen de récupérer l'élément juste après l'avoir ajouté.

javascriptjqueryappend
47
Greg Alexander

Tu peux le faire:

var el = $('<a href="#">test</a>');

$("#div_element").append(el);

el.click(function(){alert("test")});

// or preferrably:
el.on('click', function(){alert("test")});

La fonction append accepte deux types d'arguments: une chaîne ou un élément jQuery. Si une chaîne est transmise, elle créera un élément jQuery en interne et l'ajoutera à l'élément parent.

Dans ce cas, vous souhaitez accéder à l'élément jQuery vous-même, afin de pouvoir attacher le gestionnaire d'événements. Ainsi, au lieu de passer la chaîne et de laisser jQuery créer un élément, vous devez d'abord créer l'élément, puis le transmettre à la fonction append.

Après cela, vous avez toujours accès à l'élément jQuery pour pouvoir attacher le gestionnaire.

80
Kenneth
var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

5
RafH

Pourquoi ne pas enregistrer une référence au nouvel élément avant de l'ajouter:

var newElement = $('<a href="#">test</a>');
$("#div_element").append(newElement);
newElement.click(function(){alert("test")});
1
codebox

Ajoutez une identité à cette element puis utilisez-la comme suit

$("#div_element").append('<a id="tester" href="#">test</a>');


$('#tester').on('click', function(event) {
console.log('tester clicked');
});
0
Suresh Atta

Le dernier élément serait le nouvel élément

$('a:last','#div_element').on('click',function(){
    // do something
});
0
anpsmn

Vous pouvez attacher un événement à l'élément lorsque vous le créez -

var ele =$("<a href='#'>Link</a>");

ele.on("click",function(){
    alert("clicked");
});


$("#div_element").append(ele);
0
SachinGutte

Attachez simplement le gestionnaire de clic à l'ancre AVANT de l'ajouter.

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));
0
Blazemonger