jquery unable to bind functions

Question

I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/

As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:

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>

And here is the java script

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());

score 2 · Answer 1 · answered Jun 21 '12 at 15:57

2

The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.

answered Jun 21 '12 at 15:57

Anthony Grist

38,173
8
62
76

Thanks. I actually tried with live before using on. But the problem is it is not invoking setHandlers function. – Kiran Jun 21 '12 at 15:59
@Kiran The equivalent function for older versions is `.bind()` (for the particular usage of `.on()` in your code, there are other ways of using `.on()` that match other old functions), so I'd try using that first. Also make sure that your code is running after the DOM has loaded, either by including the relevant Javascript just before the closing `` tag, or using the DOM ready event. – Anthony Grist Jun 21 '12 at 16:01
Thanks @Anthony, I updated to bind (http://jsfiddle.net/H4Q5f/). However, I am back at the same problem where all this experiment started. the code $(".ssn").each( function() { var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input)) }); in the above jsfiddle is not attaching. Am I doing something wrong? – Kiran Jun 21 '12 at 16:04

score 2 · Accepted Answer · answered Jun 21 '12 at 16:29

I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.

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

The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:

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

which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:

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

So now you are passing the handler to the set method so that it will fire when the event takes place.

Hope this makes sense.

Thanks spinon, Unfortunately, I can't get the fiddle to work. I mean when I enter '123123123' for the second input element of class ssn, I don't see it autoformatted. Am I missing anything? — Kiran, Jun 21 '12 at 16:50
Ok I updated the jsfiddle (http://jsfiddle.net/H4Q5f/11/). I just really was looking at it from the standpoint of getting the handlers to fire. So I really didn't look to see why the code wasn't working. — spinon, Jun 21 '12 at 17:05

jquery unable to bind functions

2 Answers2