jQuery 有时会返回 prevObject....

Question

我正在尝试使用 jQuery 从 DOM 中删除一个项目，有时会得到一个 prevObject 而不是一个元素。我知道当没有找到元素时会返回 prevObject，如here 解释的那样

我创建了一个单页应用程序，它以两种不同的方式将元素添加到播放列表中，一种是通过拖放，另一种是通过按下按钮。两种方式都调用同一个函数，传入相关信息。

当我点击一个已被拖放的元素的移除按钮时，它被成功移除，但任何通过该按钮添加到播放列表的项目都不会被移除，因为 prevObject 是由 jQuery 返回的。

项目can be found here如果你需要好好看看。

HTML（来自 chrome 开发工具）

顶部项目已被拖放，第二个通过按钮。

<aside class="col-sm-12 ui-sortable" id="sortable">
    <article class="dropped" id="2">
        <img src="http://img.youtube.com/vi/gnbLLQwZxeA/mqdefault.jpg" alt="Put social back in social media">
        <h3>Put social back in social media</h3>
        <div class="clearfix"></div>
        <a href="#" title="Remove item" id="remove2"><i class="fa fa-minus-circle"></i></a>
    </article>
    <article class="dropped" id="3">
        <img src="http://img.youtube.com/vi/ccFLVPNBRE4/mqdefault.jpg" alt="jQuery Performance Myths and Realities">
        <h3>jQuery Performance Myths and Realities</h3>
        <div class="clearfix"></div>
        <a href="#" title="Remove item" id="remove3"><i class="fa fa-minus-circle"></i></a></article>
    // more items here
</aside>

将项目添加到播放列表的功能

var addToPlayList = function(title, image, id){
    var playlistItem = '';
    playlistItem += '<article class="dropped" id="' + id + '">';
    playlistItem += '<img src="' + image + '" alt="' + title + '">';
    playlistItem += '<h3>' + title + '</h3>';
    playlistItem += '<div class="clearfix"></div>';
    playlistItem += '<a href="#" title="Remove item" id="remove' + id +'"><i class="fa fa-minus-circle"></i></a>';
    playlistItem += '</article>';

    $(playlistItem).insertBefore('.droppable');

    $('.playlist #remove' + id).click(function(ev) {
        removePlaylistItem(id);
    });
    fixClearfix();
}

从播放列表中删除项目的功能

var removePlaylistItem = function(id){
    var itemToRemove = $('aside article#' + id);
    console.log(itemToRemove); // returns prev object for items added by button
    itemToRemove.remove();

    var video = findVideoByID(id);
    displayVideo(video, id);
    fixClearfix();
}

非常感谢任何帮助

Answer 1

如果您完全指定您的 jQuery 选择器，（即将'aside article#' + id 更改为'aside article[id=' + id + ']' 它应该可以工作。

我注意到的另一个问题是，当视频被拖动时，它们会从主列表中删除。当它们通过按钮添加时，它们不是。

Answer 2

考虑将 ID 作为 data 属性存储在 <article> 元素上，而不是使用数字 ID 和（非法）重复 ID：

<article data-id="1" ...>

然后，在删除按钮上，实际上根本不需要 ID，更好的是，您可以使用委托事件处理程序，该处理程序将处理所有条目，无论何时添加：

$('.playlist').on('click', '.remove', function(ev) {
    var id = $(this).closest('article').data('id');
    removePlaylistItem(id);
});

从而避免必须为列表中的每篇文章动态注册单独的事件处理程序。请注意，remove 链接现在只有一个类（因为每个此类链接都被同等对待）`，它通过查看其祖先来计算 ID。

您的removePlaylistItem 函数需要一点 工作才能与上述功能一起工作，但是在click 处理程序中，您已经知道要删除哪个元素，因此您不应该真的必须遍历 DOM 才能再次找到它。