0

我有一个如下所示的食谱应用程序：http: //i.stack.imgur.com/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>

查询：

(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/

4

1 回答 1

4

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

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

你可以在这里看到一个演示。

于 2013-03-25T22:59:08.110 回答