两个应该在功能上等效的jQuery事件处理程序的内容表现出不同的行为。
两个应该在功能上等效的jQuery事件处理程序的内容表现出不同的行为。
提问于 2015-08-26 15:03:08
我有两个相同的文档片段对象，并使用jQuery、你可以从我的小提琴里看到。向每个对象附加一个单独的事件侦听器。
两个事件侦听器的内容在功能上应该是等价的，但出于某种原因，只有第一个事件侦听器才能按照预期的方式工作。
下面是我创建文档片段的功能：
function createDocFrag(htmlStr) {
var frag = document.createDocumentFragment();
var temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
} 该函数接受HTML字符串作为其参数-以下是所述文档片段的标记：
<div class='product current'>
<div class='collapsed'>
<p class='name'></p>
<p class='price'><span></span></p>
<div class='info'><p>i</p></div>
</div>\
<div class='expanded'>
<ul>
<li class='base'><span> GHz Base</span></li>
<li class='turbo'><span> GHz Turbo</span></li>
<li class='cores'><span> Cores</span></li>
<li class='threads'><span> Threads</span></li>
</ul>
</div>
</div>下面是两个事件侦听器：
$(fragment1).find(".info").on("click", function(){
$(this).parents(".product").toggleClass("expand");
});
$(fragment2).find(".info").on("click", function(){
$(fragment2).find(".product").toggleClass("expand");
});很想知道是什么原因导致了这种行为(或缺乏这种行为)，因此，对这个问题的任何澄清都将是非常感激的。谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-08-26 15:07:08
忘了我的第一次尝试。您确实在使用创建DOM片段的函数时抛出了我的心。
它不能工作的原因是，在将片段附加到body元素之后，这些片段是未定义的。第一种方法起作用的唯一原因是它使用相对于单击元素的DOM导航。将此添加到第一个单击处理程序中以检查：
alert($(fragment1).html()); // Undefined!!!替代办法：
我建议以一种更"jQuery“的方式来做事情，并在页面中使用模板。这具有在HTML中维护HTML更容易的优点。
JSFiddle: http://jsfiddle.net/7j9bex15/2/
将模板放置在一个类型未知的虚拟脚本块中，这样浏览器就会忽略它。我使用text/template
<script id="fragment" type="text/template">
<div class='product current'>
<div class='collapsed'>
<p class='name'></p>
<p class='price'><span></span></p>
<div class='info'><p>i</p></div>
</div>
<div class='expanded'>
<ul>
<li class='base'><span> GHz Base</span></li>
<li class='turbo'><span> GHz Turbo</span></li>
<li class='cores'><span> Cores</span></li>
<li class='threads'><span> Threads</span></li>
</ul>
</div>
</div>
</script>通过块的id引用html：
var fragment = $('#fragment').html();并使用附加到不更改的祖先元素的委托事件处理程序来捕获动态添加的内容上的单击事件：
$(document).on('click', '.info', function(){
});使用closest (而不是parents)查找第一个最接近的匹配祖先，然后像以前一样使用toggleClass：
$(this).closest(".product").toggleClass("expand");页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32230188
复制相关文章
相似问题
腾讯云开发者
