Jquery event triggering twice for no reason

Question

I'm having a problem with a simple form where i'm attempting to fire an ajax request when someone types something. After debugging I'm left with an alert when the event is fired but it shows up twice, irrespective of the browser. (Ignore the 'rel' attribute in the input tags, that's for something else, unless you think its the rel attribute causing the issue).

<form class="formBig" name="formRegister" id="formRegister" method="post" action="">
    <label class="label" id="locationLabel" for="location">Location</label>
    <input class="input" name="location" id="location" type="text" rel="locationLabel" value="" />
</form>

<script type="text/javascript">
$("#location").click(function() {
    alert($(this).attr('id'));
});
</script>

Answer 1

You are binding a click event handler to a text input field meaning that it will be invoked when you click and not when you type. Try using the keyup event.

Answer 2

I ended up figuring it out, it was because (for some unknown-to-me-reason) the jquery I was including was put in after the form.

However, if I included it within the document.ready, it worked fine. I assume this has something to do with DOM. I dunno, I'm still fairly n00bish when it comes to jquery.

And the document ready is called from within the head-tags via a script include.