Question

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

我正在使用jQuery和tipsy工具提示。

<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

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所以当调用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

克隆后jQuery冲突

2 个答案: