更改事件不適用於動態創建的項目

Question

變更事件

$('.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輸入的值時，事件不會觸發，但是當我重新加載頁面時，事件會觸發。

Answer 1

當您綁定到類，ID等時，jQuery僅能夠綁定到頁面上當前的元素。 它看不到未來。 常見的解決方法是綁定到文檔。 很難看到您實際想要綁定的內容，但這是一個示例。

$(document).on('change','.amount input', function(){
        alert('hello!');
});