Javascript onclick：仅适用一次

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来解决此问题：

更改：

<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
            }

        },

    });

});

Answer 2

$("#alert").fadeIn();
$("#alert").addClass("alert alert-danger");
$("#alert").text("it didn't work");
$("#alert").delay(3000).fadeOut(1000);

我要做的只是再次使Element淡入。 ：D