Div costruita in script non risponde correttamente

[marcopa]

Salve, sono nuovamente qui a chiedere un aiuto nel ragionare.
ho uno script che costruisce una div , in questo modo ;
in php ho una div con il btn per l'aggiunta ed una div per la risposta :

<div class="col-md-2 text-right">
   <a href="#" style="background-color: greenyellow;" id="crea_div" title="Aggiungi nuova"> 
                         <i class="fa fa-plus-square fa-2x" style="color:#FFF;"></i>
    </a>
</div>
<div id="divfasce"></div> 

il resto è in jscript

 $('#crea_div').click(function() { 

$a = "<div class='col-md-2'><span class='input-group-addon'>Da </span><input type='text' class='form-control' id='da' name='da' name='id_gr' required ></div>";

$b = "<div class='col-md-2'><span class='input-group-addon'>Al </span><input type='text' class='form-control' id='al' name='al' required></div>";

$c = "<div class='col-md-3'><span class='input-group-addon'>Costo </span><input type='text' class='form-control' id='costoda' name='costoda' required ></div>";
            
$d = "<div class='col-md-3'><br><a href='#' title='Salva/Aggiungi' class='add_gram  btn btn-default'><i  class='fa fa-check' style='color:yellowgreen;'></a></div>";

$data = $a +$b +$c +$d ;
        
              $("#divfasce").append($data);
 });

poi ho lo script che viene richiamato dal pulsante Salva creato da $d.

         $('.add_gram').click(function() { 
            alert('clicco per aggiungere...');
          });

nessun problema di visualizzazione, ma se clicco sul pulsante che deve aggiungere la riga inserita
non succede nulla, qui mi viene da chiedere : ma le div create in questo modo devono essere gestite in modo diverso?
Perchè se c'è un click in add_gram non succede nulla?
Spero di essere stato chiaro nella spiegazione, Grazie.

[alka]

Perchè se c'è un click in add_gram non succede nulla?

Probabilmente stai aggiungendo l'intercettazione dell'evento click prima che la riga con classe .add_gram venga inserita nella pagina: se colleghi gestori di evento e solo in un secondo momento vai ad aggiungere nuovi controlli, questi nuovi elementi non scatenano l'evento.

L'evento deve essere gestito sul "contenitore" del DIV, sfruttando il meccanismo di Bubbling.

[marcopa]

Probabilmente stai aggiungendo l'intercettazione dell'evento click prima che la riga con classe .add_gram venga inserita nella pagina: se colleghi gestori di evento e solo in un secondo momento vai ad aggiungere nuovi controlli, questi nuovi elementi non scatenano l'evento.

L'evento deve essere gestito sul "contenitore" del DIV, sfruttando il meccanismo di Bubbling.

Ciao Alka , grazie dei tuoi preziosi interventi.
Ho provato anche ad intervenire sul div, in questo modo :

$('#crea_div').click(function() { 

$a = "<div class='col-md-2'><span class='input-group-addon'>Da </span><input type='text' class='form-control' id='da' name='da' name='id_gr' required ></div>";
$b = "<div class='col-md-2'><span class='input-group-addon'>Al </span><input type='text' class='form-control' id='al' name='al' required></div>";
$c = "<div class='col-md-3'><span class='input-group-addon'>Costo </span><input type='text' class='form-control' id='costoda' name='costoda' required ></div>";
           
$d = "<div class='col-md-3 testa_click' id='add_gram'><br><a href='#' title='Salva/Aggiungi' class='btn btn-default'><i  class='fa fa-check' style='color:yellowgreen;'></a></div>";

$data = $a +$b +$c +$d ;

      $("#divfasce").append($data);
});

$('#add_gram').click(function() { 
         alert('risposta da ID');
  });

$('.testa_click').click(function() { 
         alert('risposta da class');
  });

Non riesco ad arrivarci, mi sembra una cosa fatta centinaia di volte, ma questa solo perchè costruita in jscript non mi risponde!!
Quale possa essere la differenza non lo capisco....

[KillerWorm]

Ciao, aggiungo a quanto già indicato da alka, la parola chiave è "event delegation".

Perchè se c'è un click in add_gram non succede nulla?

Perché al momento in cui hai applicato il gestore per quel click, non erano presenti i div che hai invece aggiunto dinamicamente via script.

Il selettore $('.add_gram') infatti seleziona l'elemento specificato SOLO se questo è presente nella pagina ed è disponibile alla manipolazione. Va da sé che se tale elemento non esiste ancora in quel momento, hai voglia ad applicargli qualsiasi cosa... non esiste.

Per ovviare a questo problema puoi usare ciò che tecnicamente è detto "event delegation".

La delegazione di eventi, in linea di massima è un meccanismo abbastanza semplice. Selezioni un elemento genitore di cui sei sicuro che esista e persista nel documento, per cui applichi il gestore per l'elemento in questione ma delegandolo al suo genitore. Ti invito a fare qualche ricerca se vuoi approfondire l'argomento.

In jQuery puoi usare il metodo on().

Mi pare di capire che il tuo elemento genitore possa essere divfasce, che è il contenitore dove vai ad aggiungere tutto il resto da script.

Puoi quindi applicare il click in questo modo, al posto di quello che già hai:

$('#divfasce').on('click', '.add_gram', function(){ 
   alert('clicco per aggiungere...');
});

In questo modo il gestore per l'evento click viene attribuito a #divfasce ma in modo delegato. Quindi l'evento si verifica cliccando su qualsiasi elemento .add_gram discendente di #divfasce, che esista già o che sia creato successivamente.

Prova e fai sapere.

[marcopa]

Funziona!
Quindi stavo prendendo in considerazione il DIV con il button interessato ad aggiungere mentre dovevo focalizzare il tutto sul div principale.

Il bello del forum di HTML.
Grazie ragazzi. Sempre preziosi.