Question

I’ve got the following jQuery that loads some html into a div when it is hovered over:

$("div").hover(
    function () {
        $(this).load('htmlsnippets/divHoverButtons.txt');
    }, 
    function(){
        $("#divHoverButtons").css("visibility", "hidden");
    });

$("#setWidth").click(
    function(){
        $(this).css("visibility", "hidden");
    });

divHoverButtons.txt contains:

<div id="divHoverButtons">
    <div id='setWidth'>Set Width</div>
</div>

So, when any div is hovered over, it becomes:

<div>
    <div id="divHoverButtons">
        <div id='setWidth'>Set Width</div>
    </div>
</div>

The problem is that when I then click on the div “setWidth”, it doesn’t hide it. What am I doing wrong?

Answer 1

you have to use delegate() because your div #setWidth is not in the DOM when it’s loaded

http://api.jquery.com/delegate/

$("body").delegate("#setWidth", "click", function() {
  $(this).hide();
});