使用具有相同ID的多个文本字段的Jquery函数

Using Jquery functions with Multiple Text Fields With Same ID

本文关键字:文本 字段 函数 Jquery ID      更新时间:2023-11-03

我正在寻找如何使用javascript生成的jquery引用特定文本字段的帮助。

我得到的仅适用于字段引用的第一个实例。

HTML代码:

Record ID<input type="text" name="ri[]" id="ri1" size="7" style="font-size:0.9em;">
Qty Per Box<input type="text" name="qpb[]" id="qpb1" size="7" style="font-size:0.9em;">

Javascript用于生成更多类似的行

<!--Dynamically Create New Rows For Data Entry-->
 <script language="javascript">
        function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for(var i=0; i<colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                }
            }
        }
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true === chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }

            }
            }catch(e) {
                alert(e);
            }
        }
    </script>

因此,我最终得到的是具有相同id/name的多行。我只想验证keyup上的输入,所以我决定使用(this).val方法,但它只适用于第一行。

<script>
$(document).ready(function() {
    $("#ri1").keyup(function() {
    $(this).val($(this).val().replace(/[^'d]/g, ""));
    });
 });
</script>

有人知道在以这种方式生成多行输入字段时验证输入的更好解决方案吗?

Js小提琴http://jsfiddle.net/nS2LM/22/

不建议多次使用ID,但如果您使用的是最新的jQuery,那么事件委派就是您的答案:

<input type="text" name="ri[1]" id="ri1" size="7" style="font-size:0.9em;" class="do_stuff">
<input type="text" name="ri[2]" id="ri2" size="7" style="font-size:0.9em;" class="do_stuff">

<script>
$(document).ready(function() {
    $('body').on('keyup', '.do_stuff', function() {
        $(this).val($(this).val().replace(/[^'d]/g, ""));
    });
});
</script>

上面的代码将keyup绑定到主体的子元素.do_stuff,因此任何动态创建的类为.do_stuf的元素都将被keyup事件捕获。