[jQuery] Script runs several times

[[EMAIL PROTECTED]]

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