动态创建的表单不在 laravel 5 中发布 ajax

Question

我正在使用 laravel 5 开发电子商务 Web 应用程序。

我有products 表和product_options 表，两者都建立了One-To-Many 关系。

在管理面板中，我提供了在单击按钮时动态添加产品选项表单的功能，效果很好。

但是当点击按钮使用 jquery ajax 发布表单时，我得到MethodNotAllowedHttpException。

这是route：

Route::post('/admin/products/options', 'ProductsController@storeOptions');

控制器：

public function storeOptions(Request $request)
{
    $this->validate($request, [
        'p_option_item_code' => 'required|alpha_dash|unique:product_options',
        'p_option_details'   => 'string',
        'p_option_price'     => 'required|regex:/^\d*(\.\d{2})?$/',
        'p_option_quantity'  => 'required|integer',
    ]);

    if ( $request->ajax() )
    {
        $request['product_id'] = Session::get('product_last_inserted_id');
        ProductOption::create( $request->all() );

        return response(['status' => 'success', 'msg' => 'The product option has been added successfully.']);
    }
    return response(['status' => 'failed', 'msg' => 'The product option could not be added successfully.']);
}

form: 使用 jquery 动态创建

<div class="well well-sm">
    <div class="errors"></div>
    {!! Form::open(['url' => ['/admin/products/options'], 'autocomplete' => 'off', 'id' => 'formAddProdOption']) !!}
        <div class="form-group">
            {!! Form::label('p_option_item_code', 'Item Code:') !!}
            {!! Form::text('p_option_item_code', null, ['class' => 'form-control input-sm']) !!}
        </div>
        <div class="form-group">
            {!! Form::label('p_option_details', 'Product Details:') !!}
            {!! Form::textarea('p_option_details', null, ['class' => 'form-control input-sm', 'rows' => 3]) !!}
        </div>
        <div class="form-group">
            {!! Form::label('p_option_quantity', 'Stock:') !!}
            {!! Form::text('p_option_quantity', null, ['class' => 'form-control input-sm']) !!}
        </div>
        // other fields ...

        <div class="form-group">
            {!! Form::submit('Add', ['class' => 'btn btn-primary btn-block btnAddProdOption', 'id' => 'btnAddProdOption']) !!}
        </div>
    {!! Form::close() !!}
</div>

jquery代码：

$('.btnAddProdOption').on('click', function() {
    var inputData = $('#formAddProdOption').serialize();
    $.ajax({
        url: '{{ url('/admin/products/options') }}',
        type: 'POST',
        data: inputData,
        success: function(m) {
            toastr.success(m.msg, 'Successs!');
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        }
    });
    return false;
});

click 事件根本没有被触发。我不知道为什么它不起作用。

谁能帮帮我？？

谢谢。

Answer 1

如果动态添加的表单没有触发 click 事件，则听起来事件侦听器是在表单本身之前添加的。尝试通过将侦听器附加到父元素来使用事件委托：

// instead of:
$('.btnAddProdOption').on('click', function() { }

// try:
$('body').on('click', '.btnAddProdOption', function() { }

body 只是一个永远有效的例子，因为一切都在体内；在实践中，您可能希望将其附加到表单的最接近父级且不会动态更改的任何元素上。