Question

I have a dynamically created <span class="remove-row">, and I can’t get the click() event to fire. Being relatively green in JS still, I’m guessing my problem is with my selector.

It can all be seen here on jsFiddle.
(see the very bottom of the JS pane)

Here’s a skinny version of what the generated html looks like:

...
<section >
    <div class="look-like-input textfield droppable" restrict-children="1" id="">
        <span class="remove-row"><span>X</span></span>
    </div>
    <br />
    <div class="look-like-input textarea droppable" id="deprecated"></div>
</section>
...

And this is how I’m trying to get the click event:

...
$(".remove-row").click(function() {
    alert("Hello");
});

Answer 1

Because .click gets bound when the page is ready, use .on to allow for the bind to happen as the items get added to the dom. While .live would work, it has been deprecated.

$("#drop-zone").on('click', '.remove-row', function() {
    alert("Hello");
});

Drop zone id is added for efficiency and scope limiting.

http://jsfiddle.net/48nbs/22/