0

I have a table with a single span element in td.

<table>
    <tbody>
        <tr>
            <td id="td">
                <span id="span1">this is span1</span>
            </td>
        </tr>
    </tbody>
</table>

I create a jQuery tooltip for span1.

$('#span1').tooltip({
    content: function(){
        return "tooltip_span1";
    },
    items: $('#span1')
});

I update the content of td adding a second span with id 'span2' by concatenating.

var tdHtml = $('#td').html();
tdHtml+="<br> <span id=\"span2\">this is span2</span>"
$('#td').html(tdHtml);

I add a tooltip for span2 which will be displayed correctly.

$('#span2').tooltip({
    content: function(){
        return "tooltip_span2";
    },
    items: $('#span2')
});

However, the tooltip of span1 is not displayed anymore after updating the td content. Why?

Please see a jsFiddle example here.

Thanks very much for your answers.

2 Answers 2

0

You should use append, right now you are deleting and re-adding span1 (and removing previously added behavior)

$('#td').append("<br> <span id=\"span2\">this is span2</span>");

http://jsfiddle.net/dy7pq/2/

0
0

It looks like it's because you are treating the existing code as HTML and that the DOM reference is lost. It will work if instead you append a DOM fragment.

var newSpan = $('<span id="span2">this is span2</span>');
$('#td').append(newSpan);

See this fiddle for complete code: http://jsfiddle.net/harveyramer/b3xGM/1/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.