Question

我有一个食谱应用程序，如下所示： 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>

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将事件处理委托给祖先元素：

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

您可以看到演示here。

删除跨度问题

1 个答案: