jQuery Function Not Being Triggered By Button's Class

Question

Have the following piece of Laravel Blade code that is to call a jQuery function to perform a post on the click of a button using class. When a button is clicked, it just posts the current form and the jQuery function is not called.

Laravel code

@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 function

$(".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);
            });

Answer 1

The problem is in this line

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

You have mentioned class attribute 2 times here. You should only use one as shown below. In your case,

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