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

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