Laravel Taste in Klingen Vorlage eingereicht mehrfach

Question

Ich habe einige Codes in einer Blade-Vorlage, die einige Formulare und Schaltflächen erstellen, siehe unten

<div class="element1"> 
<div class="text1"> 
<form action="{{ route("progressSheetDynamic") }}" method="post" id= "add"> 
<input name="increment" value="increment" type="hidden"> </input> 
<input type="hidden" name="id" value= {{$activities}} > 
<button type="submit" class="styleHover styleButton" id= {{$activities}} > + </button> 
</form> 

{{ $count }}/{{ ($goal/5) }} 
<form action="{{route("progressSheetDynamic") }}" method="post" id="delete"> 
<input type="hidden" name="delete" value="delete"> 
<input type="hidden" name="id" value= {{$activities}}> 
<button type="submit" class="styleHover styleButton"> - </button> 
</form> 
</div> 
</div> 

Ich benutze @include_layouts ("Template-Datei") 3-mal in meiner Sicht Datei zum Erstellen der Schaltflächen 3 verschiedene Zeiten. Wenn ich auf eine Schaltfläche klicke, möchte ich eine Ajax-Anfrage auslösen. Stattdessen passiert, dass ein Klick auf die Schaltfläche erscheint, da dort die Schaltfläche klickt und die Ajax-Anfrage 3 verschiedene Male abgibt. Hier ist der entsprechende JavaScript-Code in der Klinge Datei

$(document).ready(function(){ 

$('#add').click(function(e){ 
e.preventDefault(); 
var data = $(this).serialize(); 
$.post('progressSheetDynamic', data).done(function(response){ 
console.log(data); 
}); 
}); 
}); 

Ich habe versucht, viele verschiedenen Dinge wie jQuery mit der Taste zu ändern, nachdem einem Klick deaktiviert zu sein und am Ende der jQuery-Funktion falsch zurück.

Allerdings wird jeweils ein Klick als drei verschiedene Klicks gelesen. Die Daten werden also dreimal auf der Konsole protokolliert. Gibt es eine Möglichkeit, es so zu machen, dass wenn ich auf einen Knopf klicke, er nur als ein Klick statt 3 registriert wird?

Answer 1

Sie die Ajax auf dem Formular Klick auslösenden, versuchen Sie es auf den Button klicken

$(document).ready(function(){ 

$('.styleButton').click(function(e){ 
e.preventDefault(); 
var data = $(this).closest('form').serialize(); 
$.post('progressSheetDynamic', data).done(function(response){ 
console.log(data); 
}); 
}); 
});