JavaScript onclick : only works once

Question

这是我调用的方法，我在其中通过 id 删除事件:

function delete_event(id)
{
    $.ajax({
        url: "/delete/"+id,
        type: "post",
        data: {  '_token': '{{csrf_token()}}' },
        success: function(data) {
            if (data.success == 1)
            {
                $("#alert").addClass("alert alert-success");
                $("#alert").innerText = "it worked";
                $("#alert").remove();
                $("alert").fadeOut(3000);
            }
            else
            {
                $("#alert").addClass("alert alert-danger");
                $("#alert").text("it didn't work");
                $("#alert").delay(3000).fadeOut(1000);
            }
        },
        error: function(data)
        {
            console.log("neieieiin");
            console.log(data);
        },
        complete: function(){}
    })
}

这是 HTML 代码:

<div id="alert">
</div>

<table class="table table-striped">
    <tr>
        <th>Event Name</th>
        <th>Starting Date</th>
        <th>Location</th>
        <th>Actions</th>
    </tr>

    @foreach($events as $event)
        <tr id="{{$event->event_id}}">
            <td>{{$event->event_name }}</td>
            <td>{{$event->start_date}}</td>
            <td>{{$event->street_address}}</td>
            <td>
                <a>
                    <button onclick="delete_event({{$event->event_id}})" type="button" class="btn btn-default">
                    <i class="fa fa-times" aria-hidden="true"></i>
                    </button>
                </a>
            </td>
        </tr>
    @endforeach

</table>
@endsection

当我单击删除按钮时，它仅显示一次它有效/无效。如果我第二次点击它没有任何反应，有什么建议吗？

Answer 1

您可以使用 jquery on click 方法来解决此问题:

更改:

<button data-id="{{$event->event_id}}" type="button" class="btn btn-default delete_button">


jQuery(document).on("click",".delete_button",function(){

    var id = $(this).data("id");

    $.ajax({

        url: "/delete/"+id,
        type: "post",
        data: {  '_token'           : '{{csrf_token()}}' },
        success: function(data) {
            if(data.success == 1)
            {
                //do as you want
            }

        },

    });

});