Select 2 ajax che funziona solo sul primo campo

[pippuccio76]

Salve ho un form in cui ci c'è un campo select che funziona correttamente con select2 ricevendo i dati via ajax :

<!-- INIZIO id_users -->


        <div class='row'>


            <div class='col-md-12'>
                <label class='col-md-12 col-xs-12 control-label'>Dipendente*</label>
                <div class='col-md-12 col-xs-12'>
                <select id='id_id_users'  class='form-select lista_user' name='id_users[]'>
                    <option value=''>Seleziona un valore...</option>
                    
                </select>
                </div>
            </div>
        </div>
                      


        <div id='altre_righe'>




        </div>


        <div class="row mt-5">
             <div class="col-md-12 text-end">
                
                <button id="aggiungi_riga" class="btn btn-success" type="button">Aggiungi Riga</button>


             </div>
              
        </div>

Js:

          
   $(".lista_user").select2({
        theme: "bootstrap-5",
        ajax: {
          url: "<?= base_url('/AjaxRequest/getUsers')?>",
          type: "post",
          dataType: 'json',
          delay: 250,
          data: function (params) {
             // CSRF Hash
             var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
             var csrfHash = $('.txt_csrfname').val(); // CSRF hash








             return {
                searchTerm: params.term, // search term
                [csrfName]: csrfHash // CSRF Token
             };
          },
          processResults: function (response) {
 
             // Update CSRF Token
             $('.txt_csrfname').val(response.token); 


             return {
                results: response.data
             };
          },
          cache: true
        },


     });

e il codice per inserire nuovi input :

    $("#aggiungi_riga").on("click", function() {


        $('#altre_righe').append("        <div class='row'>"+


            "<div class='col-md-12'>"+
                "<label class='col-md-12 col-xs-12 control-label'>Dipendente*</label>"+
                "<div class='col-md-12 col-xs-12'>"+
                "<select id='id_id_users"+i+"'  class='form-select lista_user' name='id_users[]'>"+
                    "<option value=''>Seleziona un valore...</option>"+
                    
                "</select>"+
                "</div>"+
            "</div>"+
        "</div>");


        i++;


    });

Ho il problema che sui campi inseriti con il pulsante non funziona il select2 nonostante non abbia nessun errore in console. Dove è l'errore ?

[ciro78]

Ciao,
problema vecchio.

Tu stai bindando un evento appena parte la pagina. Quando aggiungi il nuovo pulsante , il biding è già avvenuto e quindi non lo becca.

Prova qualcosa del genere

$(document).on('click','.btn-edit',function(){});