Why is this jQuery running -- but not working -- on my page, although it works in jsfiddle?

Question

I want to restrict the entries in a text element to numeric only. I found some code for that that works in the jsfiddle, which is referenced from here

...but on my page (Webpart) / *.ascx file, it does not. I see the alert every time I mash a key, but I can enter anything (a..z as well as 0..9). Here is the code:

<script type="text/javascript">
$(document).ready(function () {
    console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});

/* When "Employee" checkbox changes state, set up txtbxSSNOrITIN accordingly */
$(document).on("change", '[id$=ckbxEmp]', function () {
    var ssnmaxlen = 4;
    var itinmaxlen = 11;
    var ssntextboxwidth = 40;
    var itintextboxwidth = 100;
    var ckd = this.checked;
    var $input = $('[id$=txtbxSSNOrITIN]');
    var $lbl = $('[id$=lblSSNOrITIN]');

    if (ckd) $input.data("oldValue", $input.val()); // Remember current value

    $input.prop("maxlength", ckd ? ssnmaxlen : itinmaxlen).css({
        background: ckd ? 'yellow' : 'lightgreen',
        width: ckd ? ssntextboxwidth : itintextboxwidth
    }).val(function (i, v) {
        /* If checked, trim textbox contents to ssnmaxlen characters */
        return ckd && v.length > ssnmaxlen ? v.slice(0, ssnmaxlen) : $input.data("oldValue");
    });

    $lbl.text(ckd ? "SSN - last 4 digits" : "ITIN");
    /* This sets focus to the end of the textbox (multiplication by 2 is because some characters are counted as two) */
    var strLength = $input.val().length * 2;
    $input.focus();
    $input[0].setSelectionRange(strLength, strLength);
});

$(document).on("keyup", '[id$=txtbxSSNOrITIN]', function (e) {
    alert('the textbox keyup event occurred');
    /* For now, just "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); will change when the business rules for ITIN are known */
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k) >= 0))
        e.preventDefault();
});
</script>

It works the same whether the "keyup" event is "standalone" or within the ready function - in both cases, the alert displays with each keyup, but does not restrict anything. Why?

UPDATE

Thanks to putvande and Brett (and Roko, for the "soul-saving" ID-finding tip elsewhere), it now works, and has been simplified to this:

$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) { 
    var k = e.which;
    if (k < 48 || k > 57) { e.preventDefault(); }
});

Answer 1

It's because your function runs AFTER you pressed the key. So that way it won't prevent you from pressing and inputting that key. The JSFiddle you referenced does it before.
So change your function to be :

$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
//              ^^^^^^^^keypress instead of keyup
    alert('the textbox keyup event occurred');
    /* For now, just "eating" non-numeric entries (from http://jsfiddle.net/zpg8k/); will change when the business rules for ITIN are known */
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
    a.push(i);

    if (!(a.indexOf(k) >= 0)) e.preventDefault();
});