jQuery函数未由Button的类触发

如何解决jQuery函数未由Button的类触发

具有下面的Laravel Blade代码，它使用类调用jQuery函数以在单击按钮时执行发布。单击按钮时，它仅发布当前表单，并且不调用jQuery函数。

Laravel代码

@foreach ($items as $item)
    <div id="{{ $item['sbiId'] }}" class="image-view container mfp-hide" data-id="{{ $item['sbiId'] }}">
        <div class="row">
            <div class="col-md-8 col-sm-8 image-holder">
                <img src="data:image/jpg;charset=utf8;base64,{{base64_encode($item['miContent'])}}"/>
            </div>
            <div class="col-md-4 col-sm-4 image-details">
                <div>
                    <h4><span class="title">{{ $item['sbiTitle'] }}</span> <a title="Close (Esc key)" class="mfp-close icon close"></a></h4>
                    <div class="date"><span class="details">{{date('F Y',strtotime($item['miLastModified']))}}</span></div>
                    <div class="alert alert-danger alert-dismissable" style="display:none">
                        <p>Are you sure you want to delete this?</p>
                        <div class="alert-buttons">
                            <button type="button" class="btn action-btn delete-cfm" id="{{ $item['sbiId'] }}" class="remove-item">Delete</button>
                            <button type="button" class="btn action-btn cancel">Cancel</button>
                        </div>
                    </div>
                    <p class="description">{{ $item['sbiDescription'] }}</p>
                    <div class="buttons">
                        <a title="Edit" class="edit"></a>
                        <a title="Delete" class="delete"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

jQuery函数

$(".remove-item").on('click',function(e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                var urlDelete = "{{ url('scrapbook/delete') }}/" + $(this).attr('id');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                type: 'POST',url: urlDelete,data: $('form').serialize(),success: function() {
                    console.log("remove was successful");
                    resetForm(true);
                },error: function() {
                    console.log("remove was unsuccessful");
                }
                });

                resetForm(true);
            });

解决方法

问题出在这一行

<button type="button" class="btn action-btn delete-cfm" id="{{ $item['sbiId'] }}" class="remove-item">Delete</button>

您在这里两次提到了class属性。您应该只使用一个，如下所示。就您而言，

class = "btn action-btn delete-cfm remove-item"