克隆后的jQuery冲突答案

【问题标题】：jQuery confliction after clone克隆后的jQuery冲突
【发布时间】：2013-10-05 00:27:37
【问题描述】：

我想克隆带有标题的问号。一切正常，但是当我将鼠标悬停在新问号上时，工具提示出现在第一个问号上。有什么想法吗？

我正在使用 jQuery 和提示信息。

<div id="me">click here</div>
<ul id="cloneme">
    <li>
        <p class="help-mark" original-title="it's me tipsy">?</p>
    </li>
</ul>


$('#me').on('click', function(){
    $('ul#cloneme li:first-child').clone(true).appendTo('ul#cloneme')
})

$(".help-mark").tipsy({      
            fade: true,
            offset: 10,
            opacity: 1,
            gravity: 'nw'
      });

Demo

【问题讨论】：

问题是你正在克隆li。当您克隆它时，您会使用它的所有属性和属性，因此您也复制了tipsy 属性，因此它仍然指向第一行弹出窗口。您可能想尝试创建新元素并将它们附加到列表中。
我做了但没用

标签： jquery tooltip jquery-tooltip tipsy

【解决方案1】：

您需要做的是不要使用克隆（由于上面 Kierchon 提到的原因），而只是创建一个新的 <li> 元素并将其附加到 <ul>。

jsFiddle here

这行得通：

$('#me').on('click', function(){
    $('ul#cloneme').append('<li><p class="help-mark" original-title="another one">?</p></li>');
    $(".help-mark").tipsy();
});

$(".help-mark").tipsy({      
    fade: true,
    offset: 1,
    opacity: 1,
    gravity: 'nw'
});

Isaac (OP) 建议进行此修改 - 一个好主意：

$('#me').on('click', function(){
    $('ul#cloneme').append($('ul#cloneme li:first-child').html());
    $(".help-mark").tipsy();
});

【讨论】：

问题是我在克隆 li 标签时没有只有这个问号，它充满了标签。并且在开始时，一些标签将由 php 加载，其余的将通过添加新项目来克隆
@IsaacRajaei 附带说明：请不要在其他人的答案中写下您建议的解决方案，即使它不正确或有更好的解决方案。为此使用 cmets 或回答您自己的问题。

【解决方案2】：

我假设您有多个问题，每个问题都有唯一的 ID。
在这种情况下，您的问题是您通过calss 属性调用tipsy 悬停，但您必须使用id。因为这些问题中的每一个都有相同的类名help-mark，所以当调用tipsy时，将调用具有该类名的第一个对象。

所以你的代码应该是这样的：

<div id="me">click here</div>
<ul id="cloneme">
    <li>
        <p class="help-mark" id="the_question_id" original-title="it's me tipsy">?</p>
    </li>
</ul>

然后像这样使用id 而不是class：

$("#the_question_id").tipsy({      
        fade: true,
        offset: 10,
        opacity: 1,
        gravity: 'nw'
  });

the_question_id 应该是该问题的 ID

【讨论】：

谢谢你的回答我用这个来添加一个新项目，我不知道有多少项目用户可以添加到列表中
然后每个项目我需要添加 $('id_name').tipsy();这不是个好主意