两个jQuery事件处理程序的内容应该在功能上等同，表现出不同的行为

Question

我有两个相同的文档片段对象，我使用jQuery as you can see in my fiddle.

为每个对象附加一个单独的事件监听器

两个事件侦听器的内容应在功能上等效，但由于某种原因，只有第一个事件侦听器按预期运行。

这是我创建文档片段的功能：

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");
});

很想知道是什么导致了这种行为（或缺乏这种行为），因此对此主题的任何明确性都将非常感激。谢谢！