jQuery返回prevObject..有时
jQuery returns prevObject....sometimes
我试图使用jQuery从DOM中删除一个项,有时会得到一个prevObject而不是一个元素。我知道prevObject是在找不到元素时返回的,正如这里所解释的那样
我创建了一个单页应用程序,它以两种不同的方式向播放列表添加元素,一种是通过拖放,另一种是按下按钮。两种方法都调用相同的函数,传递相关信息。
当我单击已拖放的元素的删除按钮时,它会被成功删除,但通过该按钮添加到播放列表中的任何项目都不会被删除,因为jQuery返回了prevObject。
如果你需要仔细查看,可以在这里找到这个项目。
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();
}
任何帮助都非常感谢
如果您完全指定jQuery选择器(即将'aside article#' + id
更改为'aside article[id=' + id + ']'
),它应该可以工作。
我注意到的另一个问题是,当视频被拖动时,它们会从主列表中删除。当通过按钮添加它们时,它们不是。
不要使用数字ID和(非法的)重复ID,而是考虑将ID存储为<article>
元素上的data
属性:
<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才能再次找到它。
- 有时数据是't显示在浏览器中
- 气质的“nestRemoting()”有时可以'找不到关系
- jquery创建的数据-*有时无法解析
- 将带点符号的属性(有时)传递给函数
- Rails和jQuery有时不起作用
- Scriptaculous dom:仅加载工作"有时“;
- Aloha Editor不适用于Opera,有时也不适用于Chrome
- Android Webview没有'有时不会加载HTML
- AngularJS$apply有时不会;当在highchart中使用click事件时,t触发更新{{}}中html标记中
- 替换的超时事件触发两次或两次以上(有时)
- 文本输入值有时不会更改,即使它没有错误,并且似乎有效
- Ajax 提交表单有时有效,有时直接重定向到操作网址
- IE 输入清除图标有时不会触发更改事件
- Chrome onMessage.addListener 仅在有时执行
- 有时 array.length 只在 .push() 之后工作(为什么?)
- 带有 ClojureScript 的 AJAX Request 有时在 Chrome 上将 nil 作为参数
- JavaScript函数有时被调用,有时不被调用
- jQuery返回prevObject..有时
- jQuery过滤器有时显示所有元素
- 文档的第一行.写的格式不正确,有时无法显示