Javascript function not being called at all

I made the following small Javascript script to enable some form elements on my page:

function unHide()
 {
     if($('#UserName').val() == "")
     {
         alert('Please Enter a User Name first');
     }
     else
     {
         $('#radio-choice-1').checkboxradio('enable');
         $('#radio-choice-2').checkboxradio('enable');
         $('#radio-choice-1-board').checkboxradio('enable');
         $('#radio-choice-2-board').checkboxradio('enable');
         $('#TransNum').textinput('enable'); 
         $('#UserContinue').remove();
         $('#nextButton').show();
     }
 }
 

The problem is, this isn't being called when the correct button is clicked. Even the alert doesn't show up. Here is the HTML:

<label for="UserName" style="vertical-align: top;">User Name:</label>
 <input type="text" name="UserName" id="UserName" placeholder="Ex: LesniakBjEVS101" />
 
 ...
 
 <a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
     style="float:right;" onclick="javascript:unHide(); return false;">Continue...</a>
 
 ...
 
 <section id="nextButton" hidden>
     <a href="salamanderSelect.html" data-role="button" data-icon="forward" 
              data-mini="true" style="float:right;">Next</a>
 </section>
 

The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything.

Any help would be greatly appreciated!
Thanks!

Edit:

After trying out suggestions, I still am unable to get the javascript to do anything. I have tried multiple browsers, but still nothing.

And I just had this working yesterday too...without any changes to the code too

Edit 2:

Apparently it works if my script is the last thing in the HTML file, even outside of the tags.

---