Question

Can’t dynamically create a div with a clickable class:

HTML:

<div id="line1">
    <div class='clickMe'>old clickable text</div>
</div>

<div id="line2">
    <div class='dontClickMe'>old unclickable text</div>
</div>

<div id='button'>button</div>

Javascript:

$('.clickMe').click(function() {
    alert("foo");
});

$('#button').click(function() {
    $('#line2').html("<div class='clickMe'>new clickable text</div>");
});

Clicking the button replaces the code in line2. It looks fine in debugging tools, i.e. Chrome dev elements.

But the “new clickable text” in line2 is not clickable.

Answer 1

Use delegate or live. Dynamically added divs wont have handlers bound unless you explicitly bind a new handler to them.