我遇到了一个问题，我想在动态生成的输入字段上添加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>
jquery的代码：
// 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"
});
});
使用"on"函数代替"delegate"：
(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();
});
}(;