Question

我正在尝试将onBlur和onFocus处理程序附加到SSN输入字段。但是，我看到一个错误，说对象没有方法＆＃39; ON＆＃39;。代码位于http://jsfiddle.net/H4Q5f/

正如你所看到的，我评论说要弄清楚细节，但到目前为止还没有运气。任何帮助表示赞赏。为方便起见，这里是代码：

HTML：

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Test Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>

</head>

<body>
    <div data-role="page" id="MyTestPage">
        <div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
            <h1> Page Title </h1>
        </div>

        <div data-role="content">
            <div class="content-primary divcontent">
                <h1 class='h1title'>Using This App</h1>
                <p> Here are the instructions </a>
                </p>
            </div>

                <div class="inputdata">
                    <br /> <br /> 
                    <input type="text" name="accessCode" id="AccessCode" value=""  placeholder="Access Code:" /> <br />
                    <input type="text" id="ssn1" class="ssn" value=""  placeholder="SSN1:" /> <br />
                    <input type="text" id="ssn2" class="ssn" value=""  placeholder="SSN2:" /> <br />
                </div>
                <input type="button" id="myalert" value="Next" />
        </div>
        <!-- /content -->
</body>
</html>

这是java脚本

if (typeof TEST == "undefined" || !TEST) {
    var TEST = {};
}

( function() {
    TEST.mkwr = {
        init : function() { // this is a public function
      $("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
      $("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
        },

        // On Blur, we need to add the '-'s if they doesn't exist so the user
        // view edit the entered value formatted
        ssnOnBlurHandler : function(input) { // Auto format SSN on blur
            if ($(input).val().length == 9) {
                var _ssn = $(input).val();
                var _ssnSegmentA = _ssn.substring(0, 3);
                var _ssnSegmentB = _ssn.substring(3, 5);
                var _ssnSegmentC = _ssn.substring(5, 9);
                $(input).val(
                        _ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
            }
        }, // _ssnOnBlurHandler

        // On focus, we need to remove the '-'s if they exist so the user
        // can edit the entered value
        ssnOnFocusHandler : function(input) {
            // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
            if ($(input).val().length == 11) {
                var _ssn = $(input).val();
                var _ssnSegmentA = _ssn.substring(0, 3);
                var _ssnSegmentB = _ssn.substring(4, 6);
                var _ssnSegmentC = _ssn.substring(7, 11);

                $(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
            }
        }, // _ssnOnFocusHandler

        // Hide all errors
        hideError : function() {
            $(".error").hide(); // Hide all errors
        },

        setHandlers : function() {
            alert("Set Handlers");
            // $(".ssn").each( function() {
      // var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
      // });
      // $(".ssn").each( function() {
      // var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
      // });
    }
    };
})(); // end the anonymous function

$("[data-role='page']").bind("pageinit", TEST.mkwr.init());

Answer 1

jQuery 1.7中引入了.on()函数。您上面发布的代码包括jQuery 1.6.4（<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>），它没有该功能。您可以升级到最新版本的jQuery（推荐）或使用等效函数 - .bind() - 用于旧版本。

Answer 2

我在jsfiddle上发现了一些代码问题。这是一个更新的，用于解雇处理程序和解析代码。看起来你的ssn逻辑可能需要修复一点，但一切都让你到那里。

http://jsfiddle.net/H4Q5f/10/

我看到的问题部分是在您使用.on之前提到的。而不是.bind给出了jquery版本。但是你也没有设置你的处理程序，而是解雇你的处理程序。你有这个：

input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))

会将函数的结果返回给set方法，而不是您要查找的方法。所以我改成了这个：

input.bind("blur",TEST.mkwr.ssnOnBlurHandler)

所以现在你将处理程序传递给set方法，以便在事件发生时触发它。

希望这是有道理的。

jquery无法绑定函数

2 个答案: