CODEWITHSUNDEEP
javascriptjquery
Liam
Liam

Reputation: 9855

jQuery update HTML on the fly

I have a slideshow that has 5 slides (each has an individual id) and a previous and next button. When hovering the previous or next button you get a tooltip, the tooltip uses jQuery to get the ID attribute from the previous and next div and show this.

Ive gotten it working fine on mouseenter only if you dont leave the div and keep clicking the Tooltip doesnt update, you have to leave the arrows after each click for the value to be aupdated, does this make sense?

my script is...

  $("div.arrows div").bind("mouseenter", function () {
            $("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
            $("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
        });

Upvotes: 1

Views: 669

Answers (3)

sidneydobber
sidneydobber

Reputation: 2910

What does mouseover do and do you want it to change after a click on the next/prev button? I think you have to remove the inner HTML before appending new HTML. Maybe try to empty the element with .empty() and add a click event to catch that and call the function from there as well. Also try to log or alert some feedback to know when it does fire.

Upvotes: 0

mrtsherman
mrtsherman

Reputation: 39902

You will have to bind the updated html to the click event also then. This may work. Hard to tell without your html.

 $("div.arrows div").bind("click, mouseenter", function () {
     $("div.arrows div.next").children("span").html($("div.roundabout-in-focus").next("div").attr("id"));
     $("div.arrows div.prev").children("span").html($("div.roundabout-in-focus").prev("div").attr("id"));
 });

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

Since you are not leaving the div the next mouseenter is not fired which will update the tooltip. Try to set the tooltip on slide change event if supported by the plugin you are using or click event of the prev/next buttons.

Upvotes: 2

Related Questions