Can't validate quantity after ajax load content

Question

This is my example:

$.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">');
   }
});

And js validate quantity

    $(".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() is a function where parameter that is to be set as new html is passed at invocation, unless .html(function(index, html){}) pattern is used, where new html is return ed at function callback; not set as a property value as .innerHTML is. Substitute

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

for

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

---

Use event delegation to attach keydown event to dynamically created .quantity elements; or attach event when element is created

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

As others has mentioned, you have to use the html() function properly.

By the way, if ever you create html content dynamically, you have to bind the events also.

$.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">');