Having trouble getting bound events to fire

I have included the below code in the header of my page:

<script type="text/javascript">

    jQuery('#start_price').mouseleave(function() {
        alert('Hi!');
    });

</script>

I have tested it by putting my mouse into the text field with this ID and removing it, clicking outside of it but nothing fires. I checked the error console and there is nothing, so it looks like it’s not even attempting to fire it.

http://jsfiddle.net/kRaJy/

What am I doing wrong?

Answer

Timing is everything when registering event handlers. You need to wait until document ready to do this:

jQuery(document).ready(function(){
        jQuery('#start_price').mouseleave(function() {
            alert('Hi!');
        });

});

Check out the updated fiddle:

http://jsfiddle.net/kRaJy/1/