Getting access to a jquery element that was just appended to the DOM

Question

I am simply appending an element that is on the DOM like:

$(\"#div_element\").append(\'test\');

Right after I

Answer 1

Just attach the click handler to the anchor BEFORE you append it.

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

Answer 2

You can attach event to element when you create it --

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

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


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

Answer 3

The last element would be the new element

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

Answer 4

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

http://jsfiddle.net/33jX4/

Answer 5

Why not save a reference to the new element before you append it:

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

Answer 6

Add identity to that element then use it as follows

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


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