it-swarm.com.de

Zugriff auf ein jquery-Element erhalten, das gerade an das DOM angehängt wurde

Ich füge einfach ein Element an, das sich auf dem DOM befindet:

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

Gleich nachdem ich es angehängt habe, brauche ich Zugriff auf das Element, das ich gerade erstellt habe, um eine Klickfunktion daran zu binden. Ich habe versucht:

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

Aber das oben genannte hat nicht funktioniert. Ich könnte das Element eindeutig identifizieren, aber das scheint ein bisschen zu viel Arbeit zu sein, wenn es vielleicht eine Möglichkeit gibt, das Element direkt nach dem Anhängen zu erhalten.

47
Greg Alexander

Du kannst das:

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

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

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

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

Die Append-Funktion akzeptiert zwei Arten von Argumenten: einen String oder ein jQuery-Element. Wenn eine Zeichenfolge übergeben wird, wird intern ein jQuery-Element erstellt und an das übergeordnete Element angehängt.

In diesem Fall möchten Sie selbst auf das jQuery-Element zugreifen, damit Sie den Ereignishandler anfügen können. Anstatt den String zu übergeben und jQuery ein Element erstellen zu lassen, müssen Sie das Element zuerst erstellen und dann an die Append-Funktion übergeben.

Danach haben Sie weiterhin Zugriff auf das jQuery-Element, um den Handler anfügen zu können.

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

http://jsfiddle.net/33jX4/

5
RafH

Speichern Sie einen Verweis auf das neue Element, bevor Sie es anhängen:

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

Fügen Sie diesem element eine Identität hinzu und verwenden Sie es dann wie folgt

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


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

Das letzte Element wäre das neue Element

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

Sie können ein Ereignis an ein Element anhängen, wenn Sie es erstellen -

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

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


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

Befestigen Sie einfach den Click-Handler am Anker, BEVOR Sie ihn anhängen.

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