Question

jQuery决定是愚蠢的，或者我只是遗漏了一些东西，但删除附加的元素对我来说不适用于使用以下代码：

$('#add-show').click(function() {
    if ( $('#fav-search').val() == '' ) {
        // do nothing
    }
    else {
        $('.fav-results').append('<code><a href="#"><span class="icon-remove"></span></a>' + $('#fav-search').val() + '</code>');
    }
});

$('.fav-results code').on('click', 'a', function() {
    $(this).parent().remove();
});

感兴趣的人的HTML：

<div class="input-append">
    <input class="span2" id="fav-search" type="text">
    <button class="btn" type="button" id="add-show"><span class="icon-plus"></span></button>
</div>
<div class="pull-right fav-results">
    <?php foreach($shows as $show): ?>
        <code><a href="#"><span class="icon-remove"></span></a><?php echo $show['showname'] ?></code>
    <?php endforeach ?>
</div>

可以删除从我的数据库表中提取的现有标题，但不能添加任何附加元素。

我最初使用的是.click处理程序，但我读到它只适用于页面加载时DOM中存在的元素。在阅读了相同性质的先前问题之后，我改为使用.on但它仍然表现相同。

Answer 1

要将click事件应用于动态创建的元素，您应该将其委托给祖先<div>而不是<code>元素：

$(".fav-results").on("click", "code a", function() {
    $(this).parent().remove();
});

Answer 2

您正在使用remove()而不是detach()，它会删除所有code元素上的事件处理程序。

使用.on方法无法删除的附加元素

2 个答案: