javascript - 消除跨度问题

Question

我有一个食谱应用程序，如下所示: /image/FxL7R.png

成分范围的末尾有一个删除按钮。由于某种原因，我的代码无法正常工作(这意味着它没有删除成分范围):

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);

应该发生的情况是，当我单击X时，最近的跨度(包含跨度)将被删除。但当我点击它时，什么也没有发生。有什么建议么？感谢您的帮助!

<小时/>

编辑

这是一个 JSFIDDLE:http://jsfiddle.net/sjDk7/1/

Answer 1

这里的问题是您将事件处理程序附加到文档中尚未存在的元素。最简单的解决方案是使用 on 将事件处理委托(delegate)给祖先元素:

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

可以看演示here .