更改事件
$('.amount').on('change','input', function(){
alert('hello!');
});
动态创建的项目:
<tr id="row{{$data['product_id']}}">
<td><input type="checkbox" name="product[]" value="{{$data['product_id']}}"></td>
<td>{{$data['product_id']}}</td>
<td class="amount">{!! Form::input('number','qty',$data['qty'],['id'=>$data['product_id'],'min'=>'1','max'=>\App\Product::find($data['product_id'])->quantity,'required'=>'required'])!!}
</td>
<td>{{$data['stock']}}</td>
<td id="rowprice{{$data['product_id']}}">{{$data['price']}} $</td>
<td id="rowsum{{$data['product_id']}}">{{$data['qty']*$data['price']}} $</td>
</tr>
添加此项目:
$('#addProduct').click(function (e) {
$('#qty').attr('required', 'required');
$('#product_id').attr('required', 'required');
e.preventDefault();
var product_id = $('#product_id').val();
var data = $("#editOrderContent").serializeArray();
data.push(addProduct);
$.ajax({
type: 'POST',
dataType: 'JSON',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: $('#editOrderContent').attr('action'),
data: data,
success: function (html) {
if (html.success) {
$('#summary').before(html.tdProduct);
}
}
});
});
因此,当我尝试使用新创建的项目更改 qty 输入的值时,事件不会触发,但当我重新加载页面时,它会触发。
最佳答案
当您绑定(bind)到类、ID 等时,jQuery 只能绑定(bind)到当前页面上的元素。它看不到 future 。对此的常见解决方法是绑定(bind)到文档。很难看出您真正想要绑定(bind)的内容,但这里有一个示例。
$(document).on('change','.amount input', function(){
alert('hello!');
});
关于javascript - 更改事件不适用于动态创建的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43128177/