Possible to make div tags created using JQuery .html() clickable?

Question

Hey guys bit of an odd questions but if I add div tags using JQuery .html() and give them an ID can I then use .click on them? The code might explain what I am trying to do. If not is there a possible work around?

I am trying to dynamically change my site without going to a new site.

So if I create Divs with an ID.

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
 });

$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});

It does not work but I do not know why.

Thanks in advance.

Answer 1

No you would need .on() to be able to handle dynamic added elements.

$('#content2').on('click', '#button1', function() {
    // do your stuff
});

Also note that you can only add a single element with a certain id to the DOM. In your example everytime when the element with id #funTime is clicked you add en element with the same id.

You could improve your code by adding the button with some class instead of an id to the DOM or having a counter to produce unique ids. Or by preventing other clicks on #funTime by using .one() depending on your needs.

Answer 2

You can only assign an event handler to an element that exists. So the assignment of handlers should be done after the creation of the elements:

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");

$("#button1").click(function(){create();});
$("#button2").click(function(){forannimation();});
$("#button3").click(function(){createOnMouse();});
 });

However, several calls clicks on funtime will result in several elements with the same id, which results in an invalid document. Either prevent duplicate ids (eg implement a counter) or use classes.

Answer 3

You can actually create elements, bind events to them, all before they are on the screen. Backbone and others to it this way too.

var myNewDiv = $("<div ...>");
myNewDiv.click(function(){});
$(something).append(myNewDiv);

If you want to add events to things that are not yet on the page you must you use jQuery delegate.

Answer 4

You should use an on() listener for dynamically added elements

$("#content2").on('click','#button1',function(){create();});

This will add a listener to check for live added buttons in the selected container (#content2)

Answer 5

To do add thehandler as elements are created would need to add it within the click handler right after elements are appended....otherwise need to use delegation methods like on()

This would work:

$("#funTime").click(function(){
  var htmls = $("#content2").html();
  $("#content2").html(htmls + " <div id='button1'>Create</div><div id='button2'>Annimate</div><div id='button4'>Clear</div>");
  /* elements exist  can add event handlers*/
   $("#button1").click(function(){create();});
   $("#button2").click(function(){forannimation();});
   $("#button3").click(function(){createOnMouse();});

});

More common current practice is to use delegation that allows for future elements and can be run on page load