jquery无法绑定函数答案

【问题标题】：jquery unable to bind functionsjquery无法绑定函数
【发布时间】：2012-06-21 15:53:48
【问题描述】：

我正在尝试将 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());

【问题讨论】：

标签： jquery-mobile jquery jquery-on

【解决方案1】：

我发现 jsfiddle 上的代码存在一些问题。这是一个用于触发处理程序和解析代码的更新版本。看起来您的 ssn 逻辑可能需要稍微修正一下，但一切都让您到达那里。

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

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

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

这会将函数的结果返回给 set 方法，这不是您想要的。所以我把它改成了这样：

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

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

希望这是有道理的。

【讨论】：

感谢 spinon，不幸的是，我无法让小提琴工作。我的意思是当我为类 ssn 的第二个输入元素输入“123123123”时，我没有看到它自动格式化。我错过了什么吗？
好的，我更新了 jsfiddle (jsfiddle.net/H4Q5f/11)。我只是从让处理程序开火的角度来看它。所以我真的没有看到为什么代码不起作用。

【解决方案2】：

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

【讨论】：

谢谢。在使用 on 之前，我实际上尝试过使用 live。但问题是它没有调用 setHandlers 函数。
@Kiran 旧版本的等效函数是.bind()（对于您的代码中.on()的特殊用法，还有其他使用.on()的方法可以匹配其他旧函数），所以我会先尝试使用它。还要确保您的代码在 DOM 加载后运行，方法是在关闭 <body> 标记之前包含相关的 Javascript，或者使用 DOM 就绪事件。
感谢@Anthony，我已更新为绑定 (jsfiddle.net/H4Q5f)。然而，我又回到了所有这个实验开始的那个问题。代码 $(".ssn").each( function() { var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input)) });在上面的 jsfiddle 中没有附加。我做错了吗？