54

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

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

Right after I append it I need access to the element I just made in order to bind an click function to it, I tried:

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

But the above didn't work. I could uniquely id the element but that seems like a bit to much work when perhaps there is a way I can get the element right after I append it.

Greg Alexander
  • 1,192
  • 3
  • 12
  • 25
  • Just attach the click handler BEFORE you append it. – Blazemonger Apr 19 '13 at 14:46
  • 1
    possible duplicate of [How can I get a reference to a node directly after it is appended?](http://stackoverflow.com/questions/1162677/how-can-i-get-a-reference-to-a-node-directly-after-it-is-appended) and [Access Elements After Append](http://stackoverflow.com/q/5937019/218196). – Felix Kling Apr 19 '13 at 14:46

7 Answers7

93

You can do this:

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

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

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

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

The append function accepts two types of arguments: a string or a jQuery element. In case a string is passed in, it will create a jQuery element internally and append it to the parent element.

In this case, you want access to the jQuery element yourself, so you can attach the event handler. So instead of passing in the string and let jQuery create an element, you have to create the element first and then pass it to the append-function.

After you've done that, you still have access to the jQuery element to be able to attach the handler.

Kenneth
  • 28,294
  • 6
  • 61
  • 84
  • While I do think the `.on` is the best way to do it, you actually answered the question! Good job! – romo Apr 19 '13 at 14:46
  • So, is the answer to put $() around the string before you append it? What is the reasoning and story here? – sheriffderek Nov 04 '16 at 23:04
6
var $a = $('<a />', {href:"#"})
  .text("test")
  .on('click', function(e) { 
     alert('Hello') 
  })
  .appendTo('#div_element');

http://jsfiddle.net/33jX4/

RafH
  • 4,504
  • 2
  • 23
  • 23
1

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")});
codebox
  • 19,927
  • 9
  • 63
  • 81
1

The last element would be the new element

$('a:last','#div_element').on('click',function(){
    // do something
});
anpsmn
  • 7,217
  • 2
  • 28
  • 44
0

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');
});
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
  • This answer is probably of no use to OP, as it is not convenient for him. OP wrote about it in his question. – Vyaches Sep 03 '20 at 14:38
0

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);
SachinGutte
  • 6,947
  • 5
  • 35
  • 58
0

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

$("#div_element").append($('<a href="#">test</a>').click(function(){alert("test")}));
Blazemonger
  • 90,923
  • 26
  • 142
  • 180