javascript - 尝试选择两个类进行验证

Question

我有一个动态表单，在其中生成动态文本框，并且我想在这些文本框中进行验证，以便它只接受数字和小数验证，但它不起作用。单击按钮“btnASizeR”时，我正在生成文本框

 var i = 0;
                    $('#btnASizeR').click(function () {
                        /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
                        var i = $("#WireDimTbl tbody>tr").length + 1;
                        /* To check the count of already exist tr in WireDimTbl and then assigning the i value for controlids*/
                        var sizerangeMin = "<input type='text' ID='SizeMin" + i + "' name='SizeMin' class='SizeMin' value='2.00' />";
                        var sizerangeMax = "<input type='text' ID='SizeMax" + i + "' name='SizeMax' class='SizeMax' value='3.00' />";
                        var ToleranceMin = "<input type='text' ID='TolMin" + i + "' name='TolMin' class='TolMin' value='1' />";
                        var ToleranceMax = "<input type='text' ID='TolMax" + i + "' name='TolMax' class='TolMax' value='1' />";
                        var markup = "<tr><td>" + sizerangeMin + "</td><td>" + sizerangeMax + "</td><td>" + ToleranceMin + "</td><td>" + ToleranceMax + "</td></tr>";
                        $("#WireDimTbl tbody").append(markup);
                    });
                    $('#btnWdDelete').click(function () {

                        $("#WireDimTbl tbody>tr:last").remove();
                    })

我试图选择所有类并像这样进行数字和小数验证，但它不起作用。知道该怎么做。

$(".SizeMin,.SizeMax,.TolMin,.TolMax").keydown(function (event) {


                        if (event.shiftKey == true) {
                            event.preventDefault();
                        }

                        if ((event.keyCode >= 48 && event.keyCode <= 57) || 
                            (event.keyCode >= 96 && event.keyCode <= 105) || 
                            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
                            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

                        } else {
                            event.preventDefault();
                        }

                        if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
                            event.preventDefault(); 
                        //if a decimal has been added, disable the "."-button

                    });  

Answer 1

keydown 事件仅附加到现有元素，而不附加到通过代码新创建的元素。

使用delegated针对这些情况的事件

$("#WireDimTbl").on("keydown", ".SizeMin,.SizeMax,.TolMin,.TolMax", (function (event)
    {

        if (event.shiftKey == true)
        {
            event.preventDefault();
        }

        if ((event.keyCode >= 48 && event.keyCode <= 57) ||
            (event.keyCode >= 96 && event.keyCode <= 105) ||
            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190)
        {}
        else
        {
            event.preventDefault();
        }

        if ($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
            event.preventDefault();
        //if a decimal has been added, disable the "."-button

    }
    ));

这些答案还应该对委托(delegate)事件有所帮助。 Answer 1 , Answer 2