Question

When the user hovers over the image with "id=dot0001" a table with id= "info0001" that contains a checkbox with id="checkbox0001" becomes visible. When the user checks the box the image with id="dot0001" is replaced with an image that has the same id. That part works fine, the user can check and uncheck as much as he wants, the images are replaced correctly. The problem: the table does not come up when the user hovers over the image again after leaving it.

Here I define the function:

function makevisible(a){ 
    $("#tablespace").after(
        '<table  border="4" id="info'+a+'"class="info'+a+'">'+
        '<tr><td>Add to favorits</td><td><input name="" type="checkbox" id="checkboxinfo'+a+'" value=""></td></tr>')

        $("#info"+a).css("visibility", "hidden")

        $('#checkboxinfo'+a).change(function() {

        if($('#checkboxinfo'+a).is(':checked')){
    $('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')
        }
else{
    $('#dot'+a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot'+a+'" class="dot'+a+'">')  
    }   
    })

};

Here I use the function:

$(document).ready(function() {
    $("#dot0002").hover(makevisible("0002"))
    })

This makes the table visible and hidden after it has been added to the html:

    $(document).ready(function() {

$("#dot0002").hover(
  function(){
    $("#info0002").css({"visibility":"visible"});
  },
  function(){
    $("#info0002").css({"visibility":"hidden"});
  }
);

$("#info0002").hover(
  function(){
    $(this).css({"visibility":"visible"});
  },
  function(){
    $(this).css({"visibility":"hidden"});
  }
);
});

Here is a fiddle: http://jsfiddle.net/QzX9C/

I assume the problem is that jQuery does not find the image associated with the id after it has been replaced.

Any help appreciated!

Answer 1

Because you dynamically add elements to the DOM the Hover function dose not get attached to your new elements:

this:

$("#dot0002").hover(
function () {
    $("#info0002").css({"visibility": "visible"});
},
function () {
    $("#info0002").css({"visibility": "hidden"});
});

will not be attached to the image because it is injected dynamically to the DOM by this line of code:

$('#dot'+a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot'+a+'" class="dot'+a+'">')

unless you reattach it by adding a hover trigger to the .change() function

$('#checkboxinfo' + a).change(function () {
    if ($('#checkboxinfo' + a).is(':checked')) {
        $('#dot' + a).replaceWith('<img src="_index/_dots/dotfavorit.gif" id="dot' + a + '" class="dot' + a + '">')
    } 
    else {
        $('#dot' + a).replaceWith('<img src="_index/_dots/dotnormal.gif" id="dot' + a + '" class="dot' + a + '">')
    }

    //Add this code at the end to reattach the hover event on the newlly injected image
    $('#dot' + a).hover(
    function () {
        $("#info" + a).css({"visibility": "visible"});
    },
    function () {
        $("#info" + a).css({"visibility": "hidden"});
    });
})

Here is your fiddle updated: Link…