Display hidden container element - hover only works after I click the container

Question

I have a situation like this set up:

The difference in my situation is that all of the elements are created in javascript with document.createElement, and they are appended to the DOM of various webpages on the internet.

Everything works great except one thing: The hover functionality doesn't work until I click on the container. This only happens on some webpages.

My question is: What would cause the need to click on the container element in order for the hover functionality of its children to work? I have tried doing a focus() on the container element but it doesn't seem to make a difference.

Here is the fiddle code:

<input id="myInput" type="text"/>
<myContainer id="myContainer">
    <outerThing id="outerThing">
        <myThing id="myThing"></myThing>
    </outerThing>
</myContainer>
<button type="button" onclick="buttonClick()">show container</button>

#myContainer {
    position: absolute;
    top:100px;
    bottom:auto;
    right:auto;
    left:100px;
    width:200px;
    height:200px;
    display: none;
    background-color: red;
}

#outerThing{
    width:50px;
    height:50px;
    margin-top: 10px;
    margin-left: 10px;
    display: block;
    background-color: white;
}

#myThing{
    width:20px;
    height:20px;
    margin-top: 15px;
    margin-left: 15px;
    display: none;
    background-color: blue;
}

function buttonClick() {

    document.getElementById("myInput").focus();

    var cont = document.getElementById("myContainer");
    cont.style.display = "block";

    var outerThing = document.getElementById("outerThing");
    $( outerThing ).hover(
    function()
    {
        $(this).children(":last").css( "display", "inline-block" );
    },
    function()
    {
        $(this).children(":last").css( "display", "none" );
    });

}

is this what you need http://stackoverflow.com/questions/17499336/hover-action-not-working-with-dynamically-created-ul — Adam 'Sacki' Sackfield, Nov 05 '13 at 19:21
I didn't notice any issues in your fiddle. It seems ok to me. — Praveen, Nov 05 '13 at 19:24
@Praveen There are no issues with the fiddle. I was just using the fiddle to explain my set up. My question is stated at the end. — Lebowski156, Nov 05 '13 at 19:27
@Adam'Sacki'Sackfield No I don't think so. The hover works fine, but only after I have "focused" the container by clicking on it. — Lebowski156, Nov 05 '13 at 19:29
try wrapping your jquery code in the $(document).ready(function({}); — Adam 'Sacki' Sackfield, Nov 05 '13 at 19:35

score 0 · Answer 1 · answered Nov 05 '13 at 19:37

$(document).ready(function({
function buttonClick() {

document.getElementById("myInput").focus();

var cont = document.getElementById("myContainer");
cont.style.display = "block";

var outerThing = document.getElementById("outerThing");
$( outerThing ).hover(
function()
{
    $(this).children(":last").css( "display", "inline-block" );
},
function()
{
    $(this).children(":last").css( "display", "none" );
});

} });

Like this

Display hidden container element - hover only works after I click the container

1 Answers1