jQuery confliction after clone

Question

I want to clone question mark with title. Everything works but when I hover over new question marks tooltip appears on first question mark. Any idea?

I am using jQuery and tipsy tooltip.

Demo here

<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

The problem is that youre cloning the `li`. When you clone it you take all of its properties and attributes with it so youre copying the tipsy property too, thus its still pointing at the first rows popup. You may want to try to create new elements and jsut append them to the list. — Kierchon, Oct 03 '13 at 18:12

cssyphus · Accepted Answer · 2013-10-04T16:27:37.313

1

What you need to do is to not use clone (for the reasons mentioned by Kierchon above), but rather just create a new <li> element and append it to the <ul>.

jsFiddle here

This works:

$('#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) suggested this modification - a great idea:

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

edited Oct 04 '13 at 16:27

answered Oct 03 '13 at 18:21

cssyphus

37,875
18
96
111

the problem is I don't have only this question mark any time I clone li tag it is full of tags. And at begining some of the tags will be loaded by php and the rest will be cloned by add new item – Fury Oct 03 '13 at 22:19
@IsaacRajaei **As a side note**: please don't write your suggested solutions in the other person's answer, even if it's not right or there is a better solution. Use comments for that or answer your own question. – informatik01 Oct 03 '13 at 23:20

score 0 · Answer 2 · answered Oct 03 '13 at 23:44

I assume that you have multiple questions with unique IDs for each of them.
In this case your problem is that you are calling the tipsy hover by the calss attribute, but you have to use the id. cause every of these questions has the same class name help-mark so when calling the tipsy, the first object with this class name will be invoked.

so your code should look like this:

<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>

and then use the id instead of class like this:

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

and the the_question_id should be the ID of that question

Thank you for your answer I use this for adding a new item and I don't know how many item user might add to the list — Fury, Oct 04 '13 at 07:26
And then per each item i need to add $('id_name').tipsy(); which is not good idea — Fury, Oct 04 '13 at 09:30

jQuery confliction after clone

2 Answers2