Ajax加载内容后无法验证数量

Question

这是我的示例：

$.ajax({
   type: "POST",
   url: "some.php",
   data: "fname=John&lname=Due",
   success: function(result){
      $('#content').html('Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">');
   }
});

和js验证数量

    $(".quantity").keydown(function (e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            // Allow: Ctrl+A, Command+A
            (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
            // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });

Answer 1

.html()是一个函数，在调用时将传递要设置为新html参数，除非使用了.html(function(index, html){})模式，否则在函数回调中return新html 。 未设置为.innerHTML的属性值。 替代

$('#content').html('Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">');

对于

$('#content').html = 'Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">';

---

使用事件委托将keydown事件附加到动态创建的.quantity元素； 或在创建元素时附加事件

function handleKeydown(e) {
        // Allow: backspace, delete, tab, escape, enter and .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
            // Allow: Ctrl+A, Command+A
            (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
            // Allow: home, end, left, right, down, up
            (e.keyCode >= 35 && e.keyCode <= 40)) {
            // let it happen, don't do anything
            return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    }

$('#content')
.html('Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">')
.find(".quantity")
.keydown(handleKeydown);

Answer 2

正如其他人提到的那样，您必须正确使用html（）函数。

顺便说一句，如果您动态创建html内容，则还必须绑定事件。

$.ajax({
    type: "POST",
    url: "some.php",
    data: "fname=John&lname=Due",
    success: function(result){
        $('#content').html = 'Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">';

        $(".quantity").unbind("keydown").bind("keydown", function() {
            // your validation code should goes here
        });
    }
});

Answer 3

.html是您无法分配的方法，因此请按照以下步骤进行参考http://api.jquery.com/html/

$('#content').html('Label 1: <input name="quantity[]" class="quantity"> Label 2: <input name="quantity[]" class="quantity">');