Question

I have a <div> tag that gets added to the page depending on user variables (I’m using jquery append() to add it to the page)

<div id="message"></div>

I would like to have a click event for this div, but I think I am having problems because I am listening for the event before the div is added to the page.

$(document).ready(function(){
  $('#message').click(function() { console.log('clicked'); // no console message? };
});

Answer 1

Traditionally, delegate() or live() had to be used to achieve this. Since jQuery 1.7, however, on() is preferred:

$(document).on("click", "#message", function() {
    console.log("clicked");
});

As an aside, if your markup contains a non-dynamic ancestor of your #message element, it’s better to apply on() to that element instead, for performance reasons:

$("#non-dynamic-ancestor-of-message").on("click", "#message", function() {
    console.log("clicked");
});