为什么 jQuery.val() 什么也不返回？

Question

I am trying to get the value of an input. Here is what my form looks like:

This is the HTML for it:

<label for="userName"></label>
<input type="text" class="form-input plain-text" id="userName" placeholder="Username">

Here is the jQuery to get its value and log it:

$("#loginSubmit").click(function() {
    var userName = $("#userName").val();
    console.log(userName);
});

But when I type in some text and hit the login button that has the id #userName , the console returns this:

Why does this not output dwedwed in the console?

Thanks

Answer 1

Immediate reasons I can see are:

• you are attaching an event before the DOM is even loaded (if you're loading JS in the head instead of bottom of body for example)
• multiple element's with the same ID
• you have a stopPropagation on button elements which is blocking the callback

Other than the above, its hard to determine what is going on without more code/information.