Adding an Event via jQuery to newly created DOM Element

Question

I am trying to assign an event to a newly created DOM Element:

var Element = document.createElement("div");
$(document).on('click',Element,function() {
    console.log("B");
});

After executing this code and clicking on the newly created div, nothing happens. Any idea why?

I have also tried:

var Element = document.createElement("div");
$(Element).click(function(event) {
    console.log("B");
});

Answer 1

You need to add the element to the DOM before it will receive events.

Here's one way to do it:

var $div = $('<div>')
  .text('Click Me!')
  .on('click', function() {
    alert('Clicked!');
  });

$(document.body).append($div);

// Now you can click on it and see the alert.

Answer 2

Since you're using jQuery...

var Element = $("<div/>").click(function() {console.log("B");}).appendTo('body');

Of course, append it where you need it...

Answer 3

Just bind your event on the body and pass your selector in parameter like this:

$('body').on('click','.foo',function() {
    console.log("B");
});

var Element = document.createElement("div").className = "foo";

Here the codepen :

http://codepen.io/anon/pen/xvLqo