javascript not working on dynamically added tabs

Question

I am facing a strange bug at the moment, involving javascript. I have used jquery ui tabs to dynamically add and remove tabs in my website, the content of the tab contains two b

Answer 1

That's because mouseenter and mouseleave only work for items that exist in the DOM on page load

You need to use a delegated event: on for jQuery 1.7+, or delegate for earlier versions.

Try this (on):

$("body").on("mouseenter", "#butt", function () {
    $(this).css("visibility","hidden");
});

$("body").on("mouseleave", "#butt", function () {
    $(this).css("visibility","visible");
});

Or this for pre-1.7 (delegate):

$("body").delegate("#butt", "mouseenter", function () {
    $(this).css("visibility","hidden");
});

$("body").delegate("#butt", "mouseleave", function () {
    $(this).css("visibility","visible");
});