Jquery attempting to hide element when clicking on a child

Question

I am trying to hide an element when an image with the ID of 'close' is clicked.

$('#close').click(function() {
    $('#ordercell').hide('slide');
});

Should be all I need, from what I can tell, but nothing is happening when I click.

$(document).keyup(function(event) {
    if (event.keyCode ==27) {
        $('#ordercell').hide('slide');
    }
});

Is working just fine to hide when escape is pressed, so I'm not quite sure what I'm missing.

My HTML is (not using an image ATM because i figured i'd get the script working before i made one):

<div id="ordercell">
    <div id="orderform">
        <div class="cardorder" id="cardorder56">
     <div id="close">X</div>
     <img src="foo.jpg">
     </div>
    </div>
</div>

This is all hard coded, no AJAX.

Answer 1

Does the image with id="close" already exist in the DOM when you set the click function?

Btw. WFM. Check here http://jsbin.com/acose

Answer 2

Does #close exist in the DOM when you're binding to the click event? If you're using ajax or some other means to modify the DOM you'll need to setup your click event at that point in your code or use live.

$("#close").live("click", function() { do stuff });

Also you should be returning false from your click event or calling preventDefault.