使用 Laravel 中的 Ajax 第二次单击另一个锚点时页面重新加载

Question

我调用 Ajax 删除单个记录，它第一次工作并正确刷新 table 内容但是当我想删除另一条记录时，它会重新加载整个页面（ preventDefault() 不起作用），我不知道为什么。谁能帮帮我

我的HTML代码

<div class="box">
        @if ($departments->isEmpty())
            <div class="box-header">
                <h1>
                    هیچ ریاست موجود نیست
                </h1>
            </div>
        @else
            <div class="box-header">
                <h3 class="box-title">لیست ریاست ها</h3>
            </div><!-- /.box-header -->
            <div class="box-body no-padding">
                <table class="table table-condensed">
                    <thead>
                        <tr>
                            <th>شماره</th>
                            <th>ریاست به دری</th>
                            <th>ریاست به پشتو</th>
                            <th>ریاست به انگلیسی</th>
                            <th>تغیرات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($departments as $department)
                            <tr>
                                <td>{{ $department->id }}</td>
                                <td>{{ $department->nameInDari }}</td>
                                <td>{{ $department->nameInPashto }}</td>
                                <td>{{ $department->nameInEnglish }}</td>
                                <td><a href="{{ $department->id }}" class="edit">
                                        <span class="fa fa-edit"></span>
                                    </a>
                                    <a href="{{ $department->id }}" class="delete text-danger">
                                        <span class="fa fa-remove"></span>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div><!-- /.box-body -->
        @endif
    </div>

这是我的 Ajax 代码

<script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        });

        $('.delete').click(function(e) {
            e.preventDefault();
            id = $(this).attr('href');
            url = '{{ route('departments.destroy', ':id') }}';
            url = url.replace(':id', id);
            $.ajax({
                type: 'DELETE',
                url: url,
                data: {
                    id: id
                },
                cache: false,
                success: function(data) {
                    if ($.isEmptyObject(data.error)) {
                        reloadContent(data.success);
                    } else {
                        alert(data.error);
                    }
                }
            });
        });
function reloadContent(data) {
            $('tbody').html('');
            var row = '';
            $.each(data, function(key, value) {
                row = '<tr>' +
                    '<td>' + value.id + '</td>' +
                    '<td>' + value.nameInDari + '</td>' +
                    '<td>' + value.nameInPashto + '</td>' +
                    '<td>' + value.nameInEnglish + '</td>' +
                    '<td><a href ="' + value.id + '" class ="edit">' +
                    '<span class ="fa fa-edit"></span></a> ' +
                    '<a href ="' + value.id + '" class="delete text-danger">' +
                    '<span class="fa fa-remove"></span></a>' +
                    '</td>' +
                    '</tr>';
                $('tbody').append(row);
            });
        }
</script>

这是我的 Laravel 代码

public function destroy($id)
{
    $department = Departments::find($id);
    if ($department) {
        Departments::destroy($id);
        return response()->json(['success' => Departments::all()], Response::HTTP_OK);
    } else {
        return response()->json(['error' => 'No Record Found with ID = ' . $id], Response::HTTP_OK);
    }
}

Answer 1

请将$('.delete').click(function(e)改为$(document).on('click', '.delete', function(e)

$(document).on('click', '.delete', function(e) {

        e.preventDefault();
        id = $(this).attr('href');
        url = '{{ route('departments.destroy', ':id') }}';
        url = url.replace(':id', id);
        $.ajax({
            type: 'DELETE',
            url: url,
            data: {
                id: id
            },
            cache: false,
            success: function(data) {
                if ($.isEmptyObject(data.error)) {
                    reloadContent(data.success);
                } else {
                    alert(data.error);
                }
            }
        });
    });

证明：

首先删除reloadContent(data)火并添加新的.delete 元素，因此旧形式的方法不会触发新元素并使用 <a>

的默认行为

这些修改将方法从 bind 更改为 live 有关详细信息，请查看以下文章 difference between on() and live() or bind()

使用 Laravel 中的 Ajax 第二次单击另一个锚点时页面重新加载

Page reloading on second click on another anchor using Ajax in Laravel

ajax

jquery

laravel