Jquery doesn't bind to new appended elements

Question

I find out that by default JQuery doens't bind the new inserted elements. Here is a snippet which shows what I'm trying to explain.

http://jsfiddle.net/8hf5r/2/

$('#chg-em').on('click', function(e) {
    $('.local').empty().append('<p id="orange-juice">orange juice<p>');
    e.preventDefault();
});

$("#orange-juice").on('click', function() {
    alert('ola');
});

Which might be the solution? :( Thanks.

Answer 1

Use delegated events :

$(".local").on('click', '#orange-juice', function() {
    alert('ola');
});

Learn about delegated event here : http://api.jquery.com/on/#direct-and-delegated-events