jquery検証プラグインを使用して動的に追加された入力フィールドにjquery検証を適用する

Question

私は動的に生成された入力フィールドにjquery検証を追加したい問題に直面しています。私はどのように私はすべての動的に生成された入力フィールドのためにこれを適用することができない取得しています。ここで

は私のコードです：jqueryのための

<div class="inventory_table_main"> 
      <!-- start: TEXT AREA PANEL --> 
      <div class="panel panel-white"> 
       <div class="panel-heading"> 
        <h4 class="panel-title">Text <span class="text-bold">Area</span></h4> 
       </div> 
       <div class="panel-body"> 

        <!-- <form action="" method="POST"> --> 
        <?php $data = array(
         'id'=>'inventory_form', 
         ); ?> 
        <?php echo form_open('main/store',$data); ?> 
        <div class="table-responsive"> 
         <table class="table table-bordered table-hover" id="inv_tbl"> 
          <thead> 
           <th>No</th> 
           <th>Product Name</th> 
           <th>Quantity</th> 
           <th>Price</th> 
           <th>Discount</th> 
           <th>Amount</th> 
           <th><input type="button" value="+" id="add" class="btn btn-primary"></th> 
          </thead> 
          <tbody class="detail"> 
           <tr> 
            <td class="no">1</td> 
            <td><input type="text" class="form-control productname" name="productname[]" id="productname"></td> 
            <td><input type="text" class="form-control quantity" name="quantity[]"></td> 
            <td><input type="text" class="form-control price" name="price[]"></td> 
            <td><input type="text" class="form-control discount" name="discount[]"></td> 
            <td><input type="text" class="form-control amount" name="amount[]"></td> 
            <td><a href="#" class="remove">Delete</a></td> 

          </tr> 
         </tbody> 
         <tfoot> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th></th> 
         <th class="text-center"><button class="btn btn-success" id="save_btn" type="submit" name="sale_submit_btn">Save</button></th> 
         <th style="text-align:center;" class="total">0<b></b></th> 

         </tfoot> 

         </table> 

         </div> 
         <?php echo form_close(); ?> 
<!--</form>--> 


         </div> 
        </div> 
     </div> 

コード：

// All custom javascript code goes here 


$(function() { 
    $('#add').click(function() { 
     addnewrow(); 
    }); 
    $('body').delegate('.remove', 'click', function(event) { 
     $(this).parent().parent().remove(); 
     update_tbl(); 
     event.preventDefault(); 

    }); 
    $('body').delegate('.quantity,.price,.discount', 'keyup', function() { 
     var tr = $(this).parent().parent(); 

     var qty = tr.find('.quantity').val(); 
     var price = tr.find('.price').val(); 

     var dis = tr.find('.discount').val(); 
     var amt = (qty * price) - (qty * price * dis)/100; 
     tr.find('.amount').val(amt); 
     total(); 
    }); 
}); 

function total() { 
    var t = 0; 
    $('.amount').each(function(i, e) { 
     var amt = $(this).val() - 0; 
     t += amt; 
    }); 
    $('.total').html(t); 
} 

function addnewrow() { 


    var n = ($('.detail tr').length - 0) + 1; 
    var tr = '<tr>' + 
     '<td class="no">' + n + '</td>' + 
     '<td><input type="text" class="form-control productname" name="productname[]"></td>' + 
     '<td><input type="text" class="form-control quantity" name="quantity[]"></td>' + 
     '<td><input type="text" class="form-control price" name="price[]"></td>' + 
     '<td><input type="text" class="form-control discount" name="discount[]"></td>' + 
     '<td><input type="text" class="form-control amount" name="amount[]"></td>' + 
     '<td><a href="#" class="remove">Delete</td>' + 
     '</tr>'; 
    $('.detail').append(tr); 
} 


function update_tbl(){ 

var n = ($('.detail tr').length - 0) + 1; 

var tr = $(this).parent().parent(); 

     var qty = tr.find('.quantity').val(); 
     var price = tr.find('.price').val(); 

     var dis = tr.find('.discount').val(); 
     var amt = (qty * price) - (qty * price * dis)/100; 
     tr.find('.amount').val(amt); 
     total(); 

} 

/*var b = jQuery("#inventory_form").validate({ 
     ignore: [], 
     rules: { 
     'productname[]': { 
      required: true, 
      minlength: 2, 
      maxlength: 100, 
      lettersonly: true 
     }, 
     cphone: { 
      required: true, 
      minlength: 2, 
      maxlength: 16, 
      number:true, 
     }, 


     }, 
     errorElement: "span", 
     errorClass: "help-inline-error", 
    }); */ 


// Code to capture the user action of CTRL+S pressed 
document.addEventListener("keydown", function(e) { 
     if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey))  { 
     e.preventDefault(); 
     //your implementation or function calls 
     $('#save_btn').click(); 
     } 
    }, false); 


// jquery validation rules for inventory table 

var count = $('#productname').length; 
console.log(count); 
$(document).ready(function(){ 

$('#inventory_form').validate({ 

    rules:{ 
     'productname[]':{ 
      required: true,   
     }, 
     'quantity[]':{ 
      required: true, 
      number:true 
     }, 
     'price[]':{ 
      required: true, 
      number:true 
     }, 
     'discount[]':{ 
      required: true, 
      number:true 
     }, 
     'amount[]':{ 
     required:true, 
     number:true 
     } 

    }, 
    messages:{ 
     'productname[]':{ 
      required: 'Please enter product name' 
     }, 
     'quantity[]':{ 
      required: 'Please enter product quantity', 
      number:'quantity must be in numbers' 
     }, 
     'price[]':{ 
      required: 'Please enter product price', 
      number:'price must be in numbers' 
     }, 
     'discount[]':{ 
      required: 'Please enter product discount', 
      number:'discount must be in numbers'   

     }, 
     'amount[]':{ 
      required: 'Please enter product amount', 
      number:'discount must be in numbers' 
     } 

    }, 
    errorClass: "text text-danger" 



}); 






}); 

Answer 1

利用代わりに機能 "デリゲート" "上"：

(function() { 
$('#add').click(function() { 
    addnewrow(); 
}); 
$('body').on('click','.remove', function(event) { 
    $(this).parent().parent().remove(); 
    update_tbl(); 
    event.preventDefault(); 

}); 
$('body').on('keyup','.quantity,.price,.discount', function() { 
    var tr = $(this).parent().parent(); 

    var qty = tr.find('.quantity').val(); 
    var price = tr.find('.price').val(); 

    var dis = tr.find('.discount').val(); 
    var amt = (qty * price) - (qty * price * dis)/100; 
    tr.find('.amount').val(amt); 
    total(); 
}); 

}）;