Jquery 1.10.1 click on (Event delegation issue) [duplicate]

Question

Please take a look at this jsFiddle. Based on a click, an appended class is added to div. I'm trying to click based on the class and get a response. Your help is greatly appreciate!

jQuery(document).ready(function () {

    var count = 0;
    $("#more_time").click(function () {
        count += 1;

        $("#list_times").append($("#more_time").text() + " - <span id='remove_" + count + "' class='remove' style='cursor:pointer; '>(remove)</span><br>");
    });

    $(".remove").on("click", function () {
        alert("Hello");
    });

});

html

<div id="more_time">Weekdays 7:00am - 9:00am - More Time</div>
<br>
<br>
<div id="list_times"></div>

Answer 1

Looks like event delegation is your friend here.

Instead of binding the event to the class

$('.remove').on('click', function {  // some code});

Delegate the event to its static parent

$('#list_times').on('click', '.remove', function {  // some code});

Working Fiddle

Answer 2

Change your .remove binding code to the delegated syntax

$("#list_times").on("click", '.remove', function () {
    alert("Hello");
});

Demo at http://jsfiddle.net/gaby/J8KDv/6/