jquery: add event to newly created element

Question

I have added a new element via jquery. Now I want a function to trigger when the element is clicked. I know there are many answers to this, but they don't seem to work for me. Not sure what I am doing wrong here.

I have tried:

new_ele = "<a>click me</a>"
new_ele.click(function() {alert('xxxx');}); 
other_ele.append(new_ele);

This fails before the new_ele is appended.

I have also tried (instead of the second line above)

new_ele.onclick = function() { alert('blah'); };

This appends the element, but nothing happens when I click.

And

new_ele.on('click',function() {alert('ddd');});

This also fails before the element is appended.

Answer 1

Change it to:

new_ele = $("<a>click me</a>");
new_ele.click(function() {alert('xxxx');}); 
other_ele.append(new_ele);

In order to add a jQuery .click() handler, you need a jQuery object that you can call the .click() method on. Your code was trying to do:

"<a>click me</a>".click(function() {alert('xxxx');}); 

which obviously wouldn't work because there's no click method on a string. Instead, you need to turn that HTML string into an actual jQuery object by calling $() on it.

Answer 2

defined anywhere before or after .clickme is added to the dom. All you need to be sure is 'body' or any other element is already present in the DOM. The 2nd argument is a path to trigger.

$('body').on('click', 'a.clickme', function(e){
  e.preventDefault();
  console.log("clicked!");
});

$new_ele = $('<a href="#" class="clickme">click me</a>');
$("body").append( $new_elem );