Jquery simplemodal causing hover() to trigger multiple times?

Question

I've got a simple hover() event that works great here: http://waterworks.reuniondesign.com/rates (hover over one of the slip numbers)

And it works great on the homepage here, where I've unhidden it: http://waterworks.reuniondesign.com/ (scroll down)

But when one clicks on "Click here for marina layout" on the homepage, and the div is made into a simplemodal box, the hover() event is triggered twice when one mouseovers a slip number. Why is that? I tried making a thing that sets a variable to see if it's already been launched, but it didn't work. Any ideas?

Here's the code to do the hover event. jLoader is an ajax function:

    $(document).ready(function(){
    var live = false;
    $('.slip').hover(function(){
        console.log('opening ' + live);
        if (live != true) {
            live = true;
            console.log('still opening ' + live);
            $(this).css('z-index','999');
            $(this).delay(500).append("<div id='slip_popup'><div id='slip_details'>loading slip details...</div></div>");
            jLoader('/blocks/slip_detail.php?slip_number=' + $(this).attr('id').replace('slip_',''),'replace','slip_details');
        }
    },function(){
        $(this).css('z-index','1');
        $('#slip_popup').remove();
        live = false
        console.log('closing ' + live);
    });
});

Finally, if anybody knows why the delay function isn't working before the append() function I'd love to know!

Answer 1

Okay, I've figured this out, although some people may be able to elaborate more. What's happening is that the simplemodal script doesn't destroy the original div and its contents, it just clones it. What this means is that if the div is present before the simplemodal call, then anything inside that div now has multiple instances somewhere in the DOM(?).

The jquery hover() function must be getting confused somehow, because there's multiple instances of an element with the exact same id in the DOM, so it's getting called twice when you hover over one of them, which then runs the rest of the hover script, appending two divs and filling them with the ajax call twice.

So what I ended up doing is using an Ajax call after the simplemodal to fill the modal box's content. This way the elements are added to the DOM after the modal call and thus not duplicated.