“函数”在Javascript中没有定义错误：调用我的函数的正确方法是什么？

Question

I understand a bit because of this post: JQuery, setTimeout not working why it's not working, but keeping everything this way, what is the right way to call _finalvalidate() inside my div?

 <script type="text/javascript">

$(document).ready(function(){

//On Submitting
function _finalvalidate(){
    alert('ppp');
    if(validateName() & validateEmail() & validatePhone()){
        alert('OK');
        return true
    }
    else{
        alert('false');
        return false;
    }
}
});

</script>


<div onclick="_finalvalidate();"> Take action </div>

Answer 1

The jQuery way of doing it would be something like:

<script type="text/javascript">

    $(document).ready(function(){

        //When clicking on the div, execute this 
        $("#validation").click(function() {
            alert('ppp');
            if(validateName() & validateEmail() & validatePhone()){
                alert('OK');
                return true
            }
            else{
                alert('false');
                return false;
            }
        });
    });

</script>
....
<div id="validate"> Take action </div>

If you really want to use the javascript function style, you gonna have to put the function outside the document.ready() function and then you'll be able to call it with the onclick attribute:

<script type="text/javascript">

    function _finalvalidate(){
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true;
        }
        else{
            alert('false');
            return false;
        }
    }   


</script>
....
<div onclick="_finalvalidate();"> Take action </div>

In this case you don't have anymore jQuery involved.

Answer 2

You should bind your events with jQuery's events, if you are using jQuery. But as far as why it doesn't work, here is some info about JS scoping rules.

---

Any function that you declare to be used later on should NOT be in the jquery document ready callback. You can't get it because it's hidden inside a function, which provides it's own private scope that you cannot get to from outside.

var f = function() {
  var inner = function() {};
};
inner(); // out of scope

You could export it to the global object, making it available everywhere.

var f = function() {
  window.inner = function() {};
};
inner(); // works!

but the best way is to simply declare it in the global scope in the first place.

var f = function() {}; // Now this function has no purpose anymore at all!
var inner = function() {};
inner(); // works

Answer 3

Your function doesn't exist in the scope of the window where you're trying to call it. I would change your code to:

<div id="action">Take Action</div>

And then your JavaScript becomes:

<script type="text/javascript">

$(document).ready(function(){

    //On Submitting
    $('#action').click(function() {
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true
        } else {
            alert('false');
            return false;
        }
    });

</script>

Answer 4

If you want your method to be called from the div's onclick attribute, you'll need to make it available in the global scope. Below are some options. However, I should point out that Option 1 is generally frowned upon these days and Option 2 is just silly. The recommended approach for this kind of thing is to wire up your event handlers unobtrusively, as in Cory's answer.

Option 1

<script type="text/javascript">

function _finalvalidate(){
    alert('ppp');
    if(validateName() & validateEmail() & validatePhone()){
        alert('OK');
        return true
    }
    else{
        alert('false');
        return false;
    }
}

</script>


<div onclick="_finalvalidate();"> Take action </div>

Option 2

<script type="text/javascript">

var _finalvalidate;

$(document).ready(function() {
    _finalvalidate = function(){
        alert('ppp');
        if(validateName() & validateEmail() & validatePhone()){
            alert('OK');
            return true
        }
        else{
            alert('false');
            return false;
        }
    };
});

</script>


<div onclick="_finalvalidate();"> Take action </div>

Answer 5

To keep it in jQuery, I'd give your div an id tag and call it using a jQuery onclick event. Also are you sure you want to be doing bitwise & operations in your if, or logical ands && ?

<script type="text/javascript">

$(document).ready(function() {
    $('#callme').click(function() {
        alert('ppp');
        if(validateName() && validateEmail() && validatePhone()){
            alert('OK');
            return true;
        } else {
            alert('false');
            return false;
        }
    }
});

</script>

<div id="callme"></div>

Answer 6

The issue with your code is that your function is not defined in the global context, but rather it's defined inside the document.ready callback function. So, when the browser gets the onclick and does an eval of your string, it doesn't find that function name in the global context. You can fix it a number of different ways:

1) Change your function to be defined in the global scope like this:

//On Submitting
window._finalvalidate = function(){

2) Move your _finalvalidate() function outside of the document.ready() so it's in the global scope. There is no reason for it to be in document.ready() because it is not executing right away.

3) Change to the "jQuery" way of specifying event handlers rather than putting onclick=xxx in your HTML as Cory has illustrated in his answer.