Jquery 1.10.1 click on (Event delegation issue)

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>

Please post your code here, not just in a fiddle. – Barmar Jun 21 '13 at 05:19 — Barmar, Jun 21 '13 at 05:19

Sushanth -- · Accepted Answer · 2013-06-21T05:26:37.683

2

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

edited Jun 21 '13 at 05:26

answered Jun 21 '13 at 05:19

Sushanth --

55,259
9
66
105

+1 for there being an explanation – John Dvorak Jun 21 '13 at 05:26
That's awesome! New issue...now the additions I need to remove found here: http://jsfiddle.net/J8KDv/9/ – Softwaretech Jun 21 '13 at 05:50
Encase your span in a container.. And then try using `closest` to target the div container.. Something like this http://jsfiddle.net/J8KDv/10/ – Sushanth -- Jun 21 '13 at 05:53

score 0 · Answer 2 · answered Jun 21 '13 at 05:24

0

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/

answered Jun 21 '13 at 05:24

Gabriele Petrioli

191,379
34
261
317

Jquery 1.10.1 click on (Event delegation issue)

2 Answers2