Question

我有以下jQuery函数可动态创建5个可折叠（在可折叠内部）：

$(function() {
var key, value;
var Storage = 5
// loop through local storage
for (var i = 0; i < Storage; i++) {
// retrieve the key
key = i;
// set the field from the key
value = "Medicine" + i.toString();

//$("#medListDiv").show();
var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="right">' + '<h2>' + value + '</h2>' + '<input id="number' + i.toString() + '" type="text" placeholder="Quantity" />' + '<textarea cols="40" rows="4" placeholder="Type any directions written on your prescription for the above medicine." ></textarea></div>';
 $("#medListDiv div:first").append(text);
 }

 $('#medListDiv').find('div[data-role=collapsible]').collapsible();
 $('#medListDiv').trigger("create");

});

上面的代码为每个id设置了不同的textbox（注意'<input id="number' + i.toString() + '" type="text" placeholder="Quantity" />'）。

我现在的问题是我希望这些文本框只接受NUMBERS（仅限整数 - 没有小数）所以我提出（找到）以下函数，当给出“静态”id时，它可以正常工作：

$("#number0").on('keypress', function(ev) {
var keyCode = window.event ? ev.keyCode : ev.which;
//codes for 0-9
if (keyCode < 48 || keyCode > 57) {
    //codes for backspace, delete, enter
    if (keyCode != 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) {
        ev.preventDefault();
    }
}
});

我一直在尝试将此功能带到任何id，具体取决于用户选择的textbox。

此Fiddle我只显示5 collapsibles，但我的原始程序需要用户输入，药品数量可能会有所不同。请注意，第一个Quantity文本框不允许任何字母。我希望所有Quantity文本框的行为方式相同。

我还尝试了一个不同的功能，添加了var qtyID = $(this).attr(i);，因此删除了任何不是数字的输入，但它似乎没有完成工作。

$(document).ready(function () {
    var qtyID = $(this).attr(i);
    $("#number" + qtyID).keypress(function (e) {
    var value = $(this).val();
    value = value.replace(/[^0-9]+/g, '');
    $(this).val(value);
    });
});

我也尝试将整个函数放在main函数中，但根本没用。基本上我只想要get来自那些id的动态创建的textboxes，所以我可以在它们上面调用一个小函数，但不管我在网上看到的无数例子如何要做到这一点，我无法让它发挥作用。

任何建议都将不胜感激。

Answer 1

您的问题是您在第一次输入数量时调用该功能的唯一问题。不是按ID选择输入，而是按类选择它。

为每个输入添加number class。

var text = '<div data-role="collapsible" data-collapsed="true" data-iconpos="right">' + '<h2>' + value + '</h2>' + '<input id="number' + i.toString() + '" class="number" type="text" placeholder="Quantity" />' + '<textarea cols="40" rows="4" placeholder="Type any directions written on your prescription for the above medicine." ></textarea></div>';

然后在class而不是id上调用您的函数，这适用于您的所有数量输入，而不仅仅是第一个。

$(".number").on('keypress', function(ev) {
    var keyCode = window.event ? ev.keyCode : ev.which;
    //codes for 0-9
    if (keyCode < 48 || keyCode > 57) {
        //codes for backspace, delete, enter
        if (keyCode != 0 && keyCode != 8 && keyCode != 13 && !ev.ctrlKey) {
            ev.preventDefault();
        }
    }
});

http://jsfiddle.net/PU4UC/1/

Answer 2

活动授权：

$('#medListDiv').on('keypress', '#number0',  function(ev) {

您的处理程序在运行时受到约束，并且不了解这些动态创建的元素。绑定到运行时确实存在的元素。

Answer 3

试试这个： JQuery的：

$(document).ready(function () {
         $('body').on('keydown', ".number", function (event) {

             if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                 // Allow: Ctrl+A
                     (event.keyCode == 65 && event.ctrlKey === true) ||

                 // Allow: home, end, left, right
                     (event.keyCode >= 35 && event.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
             } else {
                 // Ensure that it is a number and stop the keypress
                 if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                     event.preventDefault();
                 }
             }
         });
     });

HTML：

<td><input type=text id=Qty_' + ID + '  class="number"/></td>'

在动态创建的文本框（jQuery Mobile）上调用jQuery

3 个答案: