Firebug控制台，显示错误“功能未定义”

Question

I am trying to submit a form through Ajax, but it is not calling the function?

I'm getting this error on the Firebug console:

ReferenceError: CreateUser is not defined
CreateUser()

The button I am using to call this function:

<input type="button" onclick="CreateUser()" id="RegisterUserBtn" class="btn" value="Sign Up" name="">

My function:

<script language="JavaScript">
    $(document).ready(function(e){

        function  CreateUser(){
            alert('CreateUser SignUp button is clicked.');
        }
    });

</script>

What is causing this issue? Why cant it find the function name?

Answer 1

You are mixing two styles of javascript-coding here: "old style" with on-event attributes in your html code. and "unobstrusive javascript" with the $(document).ready block. My recommendation would be to use unobstrusive javascript consistently:

Don't use onclick in your html. jQuery helps you keep all Javascript out of your html code. You already have an ID for you button.

<input type="button"  id="RegisterUserBtn" class="btn" value="Sign Up" name="">

so your jQuery could look like this:

$(document).ready(function(e) {
    function CreateUser() {
        alert('CreateUser SignUp button is clicked.');
    }
    $('#RegisterUserBtn').on('click', CreateUser);
});

This separation of HTML and Javascript is called "unobstrusive javascript".

See a live Demo here: http://jsfiddle.net/bjelline/nySxm/

Answer 2

You're creating a closure around your CreateUser function by putting it inside of an anonymous function. CreateUser is "local" to the scope of the containing function and is not exposed to the global scope where your onclick event is being defined.

Simply take the function outside of the $(document).ready block.

Answer 3

If you are using jquery then try this instead

<script language="JavaScript">
    $(document).ready(function(e){

       $("#RegisterUserBtn").click(function(){
            alert('CreateUser SignUp button is clicked.');
        });
    });
</script>

Hope this helps

Answer 4

if your want to run CreateUser function on click event, then remove $(document).ready function and declare your function inside title. The functions inside $(document).ready load after the content load. your html is loaded before the function declaration .

Or you may use jquery on function.

$(document).ready(function(e) {

   $('#RegisterUserBtn').on('click', function() {
       alert('CreateUser SignUp button is clicked.');
   });

});