[jQuery] Script runs several times
Hi
I'm just begun playing with jquery and I think it's great, but I've
run into some problems which I think needs to be solved with "Event
Bubbling" but I don't really understand how I'm supposed to do!
I'm using the jTip plugin on two places, one which is loaded inside a
div using:
function updateDiv() {
$('.container').load("update.php?test=1",
function(event) {
$('#innerpanel').fadeIn("slow");
if ($(event.target).is('.container')) {
$.getScript("jtip.js");
}
});
}
And what's loaded are basically links using the jTip such as
<a href="#" class="tooltip" id="test1" rel="info.php?id=100">hover
here for tool tip</a>
Here's the (necessary?) code from jtip.js
$(document).ready(JT_init);
function JT_init(){
$("a.tooltip").hover(function(){
JT_show(this.href,this.id,this.rel)},
function(){
$('#JT').remove()
})
.click(function(){return false});
};
function JT_show(url,linkId,info){
......
}
Can also be found here: http://www.codylindley.com/blogstuff/js/jtip/js/jtip.js
Problem is that whenever I run updateDiv() and thus refreshing that
div, the tooltips on the rest of the page is run twice! And the more I
run updateDiv(), the more the other tooltips multiply.
I've read http://docs.jquery.com/Tutorials:AJAX_and_Events
and tried to apply the (event) into the updateDiv(), but I don't
really understand how I'm supposed to make it work.
I recently downloaded livequery plugin but I can't seem to understand
how to implement this at all. Tried this for example:
$('a.tooltip')
.livequery(function(event) {
$(this).hover(function(){
JT_show(this.href,this.id,this.rel)},
function(){
$('#JT').remove()
})
.click(function(){return false});
});
And also removed the $.getScript from updateDiv();
Which is a bit of an improvement as the tooltips outside the refreshed
div only loads twice instead of like 4 or more, as it did before after
having refreshed a couple of times. Just noticed that the tooltips
always loads twice (except in the div when I have updated i), so it
wasn't that good after all :)
I think I need to have the livequery function above only apply to the
div only...
So I was trying a bit more and if I change
$('a.tooltip')
.livequery
to
$('#innerpanel > a.tooltip')
.livequery
everything seems to work!?
Maybe I should have just post the question a bit earlier, instead of
testing so much :)
Anyway... Don't want to delete everything so I might ask if this
method is okay, or if there's any better way to do it. Maybe this does
unnecessary things?
And also, is there any difference in loading time/performance if I
use .load or $.ajax when updating the div?
Thanks :)