CODEWITHSUNDEEP
jquery
Santosh
Santosh

Reputation: 24

the function gets call only once

I have a class on hover of that I am showing a "Dialog" as tooltip which contains prev/next navigation button. On basis of that I am updating the contents.

But, I am able to execute it only once. Here is the code:

$(".corner").mouseenter(function(e){
    tt_index=1;

    var id=this.id;
    $("#popup-div").html(getMultipleBooking(id.toString(),tt_index));
    $("#popup-div").height(120);

     $("#popup-div").dialog({
         resizable: false,
         autoOpen: true,
         width: 277,
         position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()+10], 

         });

     $(".ui-dialog-titlebar").hide();

     //closing the dialog when mouse enters into the white space

     $("#tt_next").click(function(){
         ++tt_index;
         $("#popup-div").html(getMultipleBooking(id.toString(),tt_index));          
    });
});

Upvotes: 0

Views: 60

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

Is the tooltip/dialog your triggering already in the dom when the page loads? Also, when you mouseout, is the tooltip/dialog removed from the DOM?

If so, then you will have to use the on() method in jQuery, http://api.jquery.com/on/ ..so the event is actively listening. If this is the case your losing the binding of the event that is attached to the trigger (.corner) in the DOM. .. Subsequently, you would ALSO use the mouseleave event to trigger when you rollout of your trigger.

Example: 

$(".corner").on("mouseenter",function(e){ 
           code stuff goes here for mouseenter 
}).on("mouseleave",function(e){ 
           code stuff goes here for mouseleave 
});

Hope this helps!

Upvotes: 1

Related Questions