jQuery自动更正对重复字段的行为很奇怪

Question

I am using a script to auto-correct input on forms using jQuery. For example, when someone writes "abc" as his initials, the field will auto-correct the input directly to ABC

These scripts work excellent. However, anyone can fill out several forms with several names. I am using knockout to duplicate the forms. So far so good, but auto-correction doesn't work on duplicated fields anymore ..

The auto-correction looks like this (small part):

// Lowercase
    $(".lowercase").keyup(function(e)
    {
        $(".lowercase").val(($(".lowercase").val()).toLowerCase());
        if (/[a-z]/g.test(this.value))
        {
            this.value = this.value.replace(/[^a-z ]/g, '');
        }

    });

    // Initials
    $(".initials").focus(function() {
        var current = $(".initials").val();
        $(".initials").keyup(function(e) {
            var key = String.fromCharCode(e.keyCode);
            if (key >= 'A' && key <= 'Z') {
                current += key + ".";
                this.value = current;
            }
            else {
                current = "";
            }
        });
    $(".initials").blur(function() {
        var i = $(".initials").val();
        var last = i[i.length - 1];
        if (last != "." && i.length !== 0){
            this.value += ".";
            }
        });
    });


    // Capitalize
    $(".cap").keyup(function(e)
    {
        function convertToUpper() {
        return arguments[0].toUpperCase();
         }
        val = this.value.toLowerCase().replace(/\b[a-z]/g, convertToUpper);
        this.value = val;

    });

A fiddle can be found here

Update

Thanks to raghaw Numbers now work. But other fields don't yet .

Answer 1

You are binding event that is not working on elements that get created in future. Here is the change I made to your code:

$(document).on("keyup", ".numbers", function(e)  
// $(".numbers").keyup(function(e)

Your modified fiddle is here http://jsfiddle.net/QUxyy/9/