jquery - 克隆后的jQuery冲突

Question

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

我正在使用 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'
      });

演示

Answer 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();
});

Answer 2

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

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

<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