JQuery 是否“缓存”？ DOM 元素？或者是 Chrome 浏览器？
我正在编写一个小型 Chrome 扩展来操纵 Google 搜索结果的 DOM，添加一小组问题来询问用户为什么他/她选择点击该链接； 在抛光时，我决定环顾页面，以防已显示旧的民意调查，将其删除（例如，如果用户在点击一个结果后决定关注另一个结果），就在那时我开始注意到一个奇怪的行为：我第一次点击链接时，在能够进入所选页面之前就收到了民意调查；第二次（不离开页面）旧的 poll 被正确删除，新的 poll 添加到 DOM，但是这个新元素只有在之前插入时才会被 slideDown() 定位 旧的（即，如果我单击上一个链接上方）。
$('li.g a') // all the results' link
.bind('click', function(event) {
event.preventDefault(); // avoid going to destination right away
var oldpoll = $('#extension');
if (oldpoll.length)
oldpoll.slideUp('fast', function(){
$(this).remove();
}); // remove (eventual) old poll
...
$(this).parents('.g').append(element);
$('#extension').slideDown();
});
正如您所看到的，我认为存在某种缓存，并尝试通过声明一个变量来保存旧元素来“强制”避免它，但这不起作用；最终，我设法通过使用 $('#extension a').parent().slideDown(); 强制进行新的 DOM 遍历来绕过它，但现在我真的很好奇它是否是我的错，或者 Chrome 的错，或者 JQuery 的错。 谢谢。
I'm writing a small Chrome extension to manipulate Google's search results' DOM to add a small set of questions to ask the user why s/he chose to follow that link;
while polishing, I decided to look around the page in case there was an old poll already shown, to remove it (as in, if the user decided to follow another result after s/he clicked on one), and that's when I started noticing a weird behaviour: the first time I clicked a link I got presented the poll before being able to proceed to the chosen page; the second time (without leaving the page) the old poll got correctly removed and the new one added to the DOM, but this new element got targeted by slideDown() only if it was inserted before the old one (i.e. if I clicked a link above the previous one).
$('li.g a') // all the results' link
.bind('click', function(event) {
event.preventDefault(); // avoid going to destination right away
var oldpoll = $('#extension');
if (oldpoll.length)
oldpoll.slideUp('fast', function(){
$(this).remove();
}); // remove (eventual) old poll
...
$(this).parents('.g').append(element);
$('#extension').slideDown();
});
As you can see, I figured there was some sort of caching going on and tried to "force" avoiding it by declaring a variable to hold the old element, but that didn't work; eventually, I managed to sail around it by forcing a new DOM traversal with $('#extension a').parent().slideDown();, but now I'm really curious about whether it's my fault, or Chrome's, or JQuery's.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为问题可能是因为您插入了多个带有 id 'extension' 的元素。 ID 在文档中应该是唯一的，但在 SlideUp 运行期间，将会有两个“#extension”元素。
因此，如果你将它插入到旧元素之上，然后运行slideDown，它会尝试在新元素上执行它，但如果你将它插入到旧元素之后，那么你的slideDown将在旧元素上运行，因为 $( '#extension') 将采用页面中第一个具有该 id 的扩展。
I think the problem is probably because you are inserting multiple elements with the id 'extension'. IDs are supposed to be unique in the document, but during the time that slideUp is running, there will be two '#extension' elements.
Because of that, if you insert it above the old, and then run slideDown, it will try to execute it on the new one, but if you insert it after the old element, then your slideDown will run on the old one because $('#extension') will take the first one with that id in the page.
正如上面的评论所说，使用 .bind() 时有很多怪癖：
http://api .jquery.com/bind/
所以我绝对推荐使用 .live() （也已被弃用...）或新的 .on()
As the comment above as said it, there are quite a few quirks when using .bind():
http://api.jquery.com/bind/
so I would definitely recommend using .live() (also being deprecated ...) or the new .on()