Variabile che non viene inizializzata correttamente ad ogni chiamata

[Kreatore]

Ciao ragazzi.
Ho scritto questa funzione ma non si comporta come mi aspetto:
La funzione stampa tramite JQuery in una pagina due campi di input ogni volta che clicco sul pulsante +.
Poichè questi campi vengono poi salvati su un database, li sto indicizzando assegnando un valore incrementale tramite una variabile $i.
All'inizio della funzione questa variabile $i viene inizializzata, quindi io mi aspetto che ogni qualvolta clicco sul pulsate + lui cominci da 0 e di volta in volta mi incrementi la variabile di 1.

In realtà questo non accade e già alla seconda chiamata della funzione, lui aggiunge più campi alla pagina tutti con lo stesso valore della variabile $i.

Se la prima volta che chiamo la funzione 'contenutogomma' il contenuto di obj (che viene passato da php tramite una chiamata ajax) contiene 3 valori (chiamiamole righe per semplicità), lui mi crea 3 righe con i relativi campi input. Ora io aggiungo una 4° riga cliccando sul pulsante +, salvo e richiamo il contenuto di un'altra gomma (un contenitore con delle righe al suo interno). Fin qui tutto perfetto.
Il server restituisceil valore di obj con 2 righe. La funzione quindi mi creerà due righe con i relativi campi di input.
Se clicco ancora sul pulsante +, io mi aspetto che lui mi crei 1 riga per arrivare ad un totale di 3, in realtà mi crea 2 righe.

Quindi eseguo una nuova richiesta al server, ipotizziamo che mi restituisca un obj, con 1 sola riga.
Chiedo alla funzione tramite il pulsante + di aggiungere una riga e invece ne vengono aggiunte 3.
Tutte con il valore della variabile $i settato al risultato della chiamata precedente come se non venisse inizializzato.

Sapete aiutarmi?

Questo è il codice della funzione

function contenutogomma(obj){    console.log('Il valore di $i appena accedo a contenutogomma',$i);
    //sviluppo la gestione delle linee.
    var $i=0
    console.log('Il valore di $i dopo aver dichiarato la variabile $i',$i);
    $('#aggiorna').html('<input type="hidden" name="action" value="aggiorna">'
                +'<input type="hidden" class="aggiorna campo" name="aggiorna" value="'+obj.input+'">');
    $('#aggiorna')
    .prepend('<p><input type="submit" value="Registra" class="'+obj.act+'"></p>')
    .on('click','.badd',function(e){
        console.log('Aggiungo una riga');
        console.log('Il valore di $i prima dell\'incrementeo è',$i);
        $i++
        console.log('Il valore di $i subito dopo l\'incrementeo è',$i);
        var rowItem='<p class="row n'+$i+'"><input type="text" name="row['+$i+'][articolo]" value="" />'
            +'<input type="text" name="row['+$i+'][extra]" value="" />'
            +'<input type="hidden" name="row['+$i+'][id]" value="new" />'
            +'<b name="badd" class="badd">+</b><b name="bdel" class="bdel">-</b></p>';
        $("#aggiorna").append(rowItem);
       console.log('Abbiamo un totale di '+$(".row").length+' righe');
    })
    .on('click','.bdel',function(e){
        console.log('Cancello una riga');


         if($(".row").length > 1){
            //controllo se la riga è nuova o ha un ID
            console.log(' la riga è '+$(this).siblings("input[name*='id']").val());
            let riga_da_cancellare=$(this).siblings("input[name*='id']").val();


            //se la riga è nuova la cancello
            if( riga_da_cancellare == 'new'){
                $(this).parents(".row").remove();
            }else{
            //se la riga ha un id, la elimino dal dB, quindi la cancello.  
                $.ajax({
                   type: "POST",
                   url: 'gomme.php',
                   data:{action:"delrig", delrig:riga_da_cancellare},
                    success: function(result) { 
                        updatebtn(1);
                    }
                });
                $(this).parents(".row").remove();
                console.log('non posso cancellare la riga con id '+riga_da_cancellare);
            }
            
        }


        console.log('Abbiamo un totale di '+$(".row").length+' righe');
    });
    $.each(obj.res, function(index, item) {
        if(obj.act=="modifica"){
            $('#aggiorna').append(
            '<p class="row"><input type="text" name="row['+item.id+'][articolo]" value="'+item.articolo+'" />'
            +'<input type="text" name="row['+item.id+'][extra]" value="'+item.extra+'" />'
            +'<input type="hidden" name="row['+item.id+'][id]" value="'+item.id+'" />'
            +'<b name="badd" class="badd">+</b><b name="bdel" class="bdel">-</b></p>'
            );  
        }else{
            $('#aggiorna').append(
            '<p class="row"><input type="text" name="row[0][articolo]" value="" />'
            +'<input type="text" name="row[0][extra]" value="" />'
            +'<input type="hidden" name="row[0][id]" value="new" />'
            +'<b name="badd" class="badd">+</b><b name="bdel" class="bdel">-</b></p>'
            );
        }
    });   
}

[KillerWorm]

Ciao, non è troppo chiaro il contesto e fatico a capire come rintracciare il problema.

Dove e come richiami la funzione contenutogomma().

In quella funzione tu stai applicando dei listener per il click sugli elementi .badd e .bdel. Se la richiami più volte (nella stessa pagina), quei listener saranno applicati di conseguenza più volte, per cui la stessa funzione viene ripetuta più volte al click.

Posso giusto supporre che il problema stia proprio lì ma sarebbe necessario verificarlo attraverso un esempio minimo in cui sia possibile capire anche il contesto.

[Kreatore]

In realtà bdell funziona senza nessun problema.
La chiamata alla funzione contenutogomma() la faccio nella sezione succes: di una chiamata ajax:

$('form').on('submit', function(e) {
        e.preventDefault();
        ......
        //eseguo la chiamata ajax
        $.ajax({
            type: "POST",
            url: 'gomme.php',
            data: $(this).serialize(), // serializes the form's elements.
            success: function(result) {
                //visualizzo il risultato in console
                obj= JSON.parse(result);
                console.log('Il risultato dell\'oggetto: ');
                console.log(obj); //tutto l'oggetto
                if(obj.act=="cerca"){
                    risultatiricerca(obj);
                }
                if(obj.act=="modifica"){
                    contenutogomma(obj);
                }                    
            } //success
        });
    }else{
        console.log('Campo vuoto');
    }
    });//form

questo è l'output della console per l'oggetto obj che passo alla funzione

Object
act:"modifica"
input:"744"
res:(2) [{…}, {…}]

[KillerWorm]

Ma il submit del form quand'è che avviene?

Non è forse relativo al pulsante submit che inserisci nell'elemento #aggiorna?

In tal caso fai attenzione perché il click per .badd e .bdel lo stai applicando in modo delegato attraverso quell'elemento #aggiorna. Tale elemento infatti non viene "distrutto" e mantiene quindi tutti i listener che gli vai ad applicare man mano, anche se questi fanno riferimento ad elementi interni che vengono distrutti e ricreati.

Penso proprio che richiamando quella stessa funzione ogni volta al submit, stai aggiungendo di volta in volta anche dei nuovi listener per quei click, i quali sono poi eseguiti distintamente tutti quanti.

Dovresti applicare quegli eventi una sola volta fuori dal ciclo. In tal caso andrebbe rivisto il modo con cui fai riferimento alla variabile $i.

In alternativa potresti provare a rimuovere i listener prima di riapplicarli.

Puoi usare il metodo off(), definendo magari un namespece per quei due eventi click in modo da poterli rimuovere facilmente prima di ricrearli.

Sintetizzando potrebbe essere una roba del genere:

$('#aggiorna')
// ...
.off('.eventi_riga')
.on('click.eventi_riga','.badd',function(e){
  // ...
})
.on('click.eventi_riga','.bdel',function(e){
  // ...
})