[Solved] qtip with live/delegate and multiple events

[Tangoman]

Hi,

I originally wanted to be able to bind 2 different events so that qtips appeared with a delay on a mouseover, but instantly on a click.

You helped me out there with use of events.

I'm now trying to incorporate the .live or .delegate functions as my application is ajax intensive.

I have a fiddle here: http://jsfiddle.net/wTnLL/1/
which demonstrates the problem.

Basically - if you click on the word Test immediately after loading the page, nothing happens -it's only if you first hover until a qtip is presented, that the click functionality is bound.

Is there a way to fix this?

Thanks
Tony

[Craig]

Well since it isn't rendered until the first show delay, you'll need to bind it after: http://jsfiddle.net/wTnLL/2/

[Tangoman]

Perfect - thanks!

[blim8183]

I'm trying to bind a qTip to an element that is added via ajax. I've seen the examples using live() or delegate() and the mouseover event but that doesn't seem like it would work on a mobile device. Is there another way of doing this that might work better?

[Craig]

Well when you populate the new elements in the DOM just re-call the same qTip init function:

JS Code

$(function() {
 
	function createTooltips() {
		$('a').qtip({
			overwrite: false, // Shouldn't need this, but just incase we want to make sure we don't re-create tooltips if they're already present!
			// Other config here
		});
	}	
 
	$.ajax({
		url: '/grabelements.php',
		success: function(html) {
			$('#dynamicContents').html( html );
			createtooltips();
		}
	});
 
	createTooltips(); // Call it once on document ready to setup all non-dynamic elements
});