Question

I have a page set up so that there are several company logos set out in a 3×2 block on the page (mid-box-left).

When the user clicks on a logo, the contents of another div (mid-box-right) next to the logo block changes, loading 4 thumbnail icons representing 4 distinct sets of data.

What I want to do now is this:

When the user hovers over one of the 4 thumbnail images, it replaces the logo block with the contents of a hidden div (mid-box-right1) containing the information relevant to the thumbnail image selected. And when they move the mouse off the thumbnail, the logo block reappears.

Right now, clicking on the logo loads the content of the first div perfectly fine, but hovering over the image in the second div does not result in the logo block being replaced with the content from the mid-box-right1 hidden div.

I have it set up in the following way:

<div id="HiddenContainerOne" style="display:none;">
    <div id="mid-box-left1"><a href="#" class="testbox1"><-- content here --></a></div>
</div>

<div id="HiddenContainerTwo" style="display:none">
    <div id="mid-box-right1"><-- content here --></a></div>
</div>

<div id="mid-box-right">
    <a href="#" class="logo-change"><-- logo here --></a>
</div>

<div id="mid-box-left">
    <-- content here -->    
</div>

And the JQuery is as follows:

$(document).ready(function() {

$(".logo-change").click(function() {
    $("#mid-box-left").fadeOut(500, function() {
        $("#mid-box-left").html($("#mid-box-left1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-left');
        });
    });
    return false;
});

$(".testbox1").mouseover(function() {
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});
});

Answer 1

The problem is that you are copying the html of the hiddencontainerone

$('foo').html($('link').html());

This does not copy events. So the mouseover event doesn’t exist on the copied link. You should use clone or rebind your event handler after copy instead.

Alternately you could make use of on and monitor a higher level node for the mouseover event.

http://jsfiddle.net/jByc7/

$('body').on('mouseover', '.testbox1', function() {
        console.log('mouseover');
        $("#mid-box-right").html($("#mid-box-right1").html())
        .hide()
        .fadeIn(500, function () {
            $('#mid-box-right');
        });
    return false;
});​