javascript - HTML 输入元素没有方法 'isValid'

Question

我有一个 javascript 类 c我正在尝试调用它的方法 isValid()关于onClick输入提交按钮的事件。我有c目前在我的提交按钮下方的一组脚本标签中。当我点击提交按钮时，我得到

Uncaught TypeError: Object #<HTMLInputElement> has no method 'isValid'

经过一番折腾后，我尝试将相同的提交按钮放置在页面底部、类脚本下方。这样就可以正确调用该方法。

这是我的 JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var c = {
        container : $('#c_c'),
        r1 : 0,
        r2 : 0,
        c_i : "",
        createCaptcha : function(){
            var newHtml;

            this.r1 = this.randomNumber(10);
            this.r2 = this.randomNumber(10);
            // alert(this.r1 + this.r2);

            newHtml += "<p>What is " + this.r1 + " plus " + this.r2 + "?<br/><input type='text' name='c'></p>";

            this.container.html(newHtml);
        },
        isValid : function(){
            // alert(this.r1);
            this.c_i = $('input[name="c"]');
            if (this.r1 + this.r2 == this.c_i.val()) {
                alert('correct!');
                return true;
            } else{
                alert('incorrect =[');
                return false;
            }
        },
        randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
    }
    c.createCaptcha();
</script>

这是我的按钮:

<input id="form_0001_ao_submit_input" type="button" name="SUBMIT" value="Submit" style="color:#fff; font-size: 18px; height: 30px; width: 250px; background-color: #00a94f;" onClick="c.isValid();">

我的页面上还有一个带有 ID 的跨度。这就是 createCaptcha() 中引用的内容(抱歉我错过了这条重要信息=[):

<span id="c_c"></span>

页面如下所示:

<span id="c_c"></span>
<input id="form_0001_ao_submit_input" type="button" name="SUBMIT" value="Submit" style="color:#fff; font-size: 18px; height: 30px; width: 250px; background-color: #00a94f;" onClick="c.isValid();">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var c = {
        container : $('#c_c'),
        r1 : 0,
        r2 : 0,
        c_i : "",
        createCaptcha : function(){
            var newHtml;

            this.r1 = this.randomNumber(10);
            this.r2 = this.randomNumber(10);
            // alert(this.r1 + this.r2);

            newHtml += "<p>What is " + this.r1 + " plus " + this.r2 + "?<br/><input type='text' name='c'></p>";

            this.container.html(newHtml);
        },
        isValid : function(){
            // alert(this.r1);
            this.c_i = $('input[name="c"]');
            if (this.r1 + this.r2 == this.c_i.val()) {
                alert('correct!');
                return true;
            } else{
                alert('incorrect =[');
                return false;
            }
        },
        randomNumber : function(max){ return Math.floor(Math.random()*(max+1)); }
    }
    c.createCaptcha();
</script>

看起来确实像是调用了尚未定义的方法c对象不允许该方法运行，这是有道理的。

缓解这种情况的最佳方法是什么，而无需将脚本移至页面顶部(就性能而言，js 最好放置在底部)？感谢您的帮助!

Answer 1

也许您可以稍后在代码中向输入对象添加事件监听器。使用 JQuery:

$("#form_0001_ao_submit_input").click(function() { c.isValid(); });

(声明 c 后)