消除跨度问题

Question

I have a recipes application that looks like this: http://i.stack.imgur.com/FxL7R.png

At the end of ingredient span is a delete button. For some reason, my code is not working (which means its not deleting the ingredient span):

HTML:

        <div class='formelementcontainer funky'>
        <label for="ingredient">Ingredients</label>
        <div id='ingredientsCOUNT' class='sortable'>
            <span>
                <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
                <select name='measurements'>
                    <option value='' name='' checked='checked'>--</option>
                    <?foreach ($measurements as $m):?>
                        <option value='<?=$m->id;?>'><?=$m->measurement;?></option>
                    <?endforeach;?>
                </select>
                <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
                <a class='float-right delete-button' id='deleteThis' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>
            </span>
        </div>
        <div class="clear"></div>
        <div class='addSPAN tabover'>
            <a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
        </div>
        </div>

JQUERY:

(function($) { 
$(document).ready(function () {
    $('#btnAddIngredients').click(function () {
        var num = $('#ingredientsCOUNT span').length;
        var newNum = new Number(num + 1);
        $('#ingredientsCOUNT > span:first')
            .clone()
            .attr('name', 'ingredient' + newNum)
            .appendTo('#ingredientsCOUNT')
            .fadeIn();
    });
    $('#deleteThis').click(function () {
        var span = $(this).closest('span');
        span.fadeOut('slow', function() { span.remove(); });
    });
});
})(jQuery);

What's supposed to happen is when I click on the X , the closest span (the containing span) is removed. But when I click on it, nothing happens. Any suggestions? Thanks for all help!

---

EDIT

Here is a JSFIDDLE: http://jsfiddle.net/sjDk7/1/

Answer 1

The problem here is that you are attaching an event handler to elements that aren't yet in the document. The easiest solution is to delegate event handling to an ancestor element using on :

$('.formelementcontainer').on('click', '.deleteThis', function () {
    var span = $(this).closest('span');
    console.log(span);
    span.fadeOut('slow', function () {
        span.remove();
    });
});

You can see a demonstration here .