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

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


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.


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

http://jsfiddle.net/33jX4/


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")});