Javascript Onclick: funktioniert nur einmal

Question

Hier ist die Methode, die ich nennen, wo ich die Veranstaltung von ID löschen:

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(){} 
    }) 
} 

Hier ist der HTML-Code:

<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 

Wenn ich auf den Lösch Taste es nur einmal zeigt es funktioniert/es hat nicht funktioniert. Wenn ich ein zweites Mal klicke, passiert nichts.

Answer 1

Sie können jquery auf Klick-Methode verwenden, um dies zu lösen:

Wechsel:

<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); 

Alles, was ich wieder zu fadeIn() das Element zu tun hatte. : D