0

我正在尝试将 onBlur 和 onFocus 处理程序附加到 SSN 输入字段。但是，我看到一个错误说对象没有方法'ON'。代码位于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());
4

2 回答 2

2

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

于 2012-06-21T15:57:16.200 回答
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 方法，以便在事件发生时触发它。

希望这是有道理的。

于 2012-06-21T16:29:53.763 回答