CODEWITHSUNDEEP
javascriptjquerydomtooltip
Sanya
Sanya

Reputation: 1280

Javascript DOM elements invalid CSS

I have a tooltip plugin (tooltip.js & tooltip.css). The requirements of this tooltip is that inside a SPAN or DIV element you need to have both rel='tooltip' and title='' - then the tooltip plugin will initate a tooltip.

The problem is that I'm adding DOM HTML elements to the page with those attributes but they are not working. They initially work but when I add dom elements, those DOM elements stop working.

FYI I'm using (Jquery mobile 1.3.1 & jQuery 1.9.1)

HTML

<table id='maintable'>

</table>

JAVASCRIPT

//function initiates with this stuff
var part1 = "<tr><td rel='tooltip' title='new title'>Something</td></tr>";
$('#maintable').append(part1).trigger('create');

What am i doing wrong? Why is it not initiating? FYI .trigger('refresh') does not work.

Upvotes: 0

Views: 127

Answers (2)

Ohgodwhy
Ohgodwhy

Reputation: 50797

Change this

targets.bind( 'mouseenter', function()

to

$(document).on('mouseenter', targets, function(){

And also

target.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip )

to

$(document).on('mouseleave', target, remove_tooltip);
$(document).on('click', tooltip, remove_tooltip);

And replace document in my code, with the closest static ** (never removed or replaced) **parent element.

This will give event delegation to dynamic elements and will allow for the code to still execute.

Upvotes: 1

user2509223
user2509223

Reputation:

I'm not an expert in jQuery (mobile), but I assume that the tooltip initializes before the DOM Elements are appended. If this is the case you should either append your elements before the tooltip chek the DOM tree, or more dynamically, which is more likely to be the usual use case, re-initialize the tooltips. Anyway I suggest checking the tooltip implementation if possible, to find the easiest, most efficent way to do.

Upvotes: 0

Related Questions