[Jquery] Funzione che reagisce al click su gli elementi con una determinata classe

[AtoXx]

Ciao a tutti, ho un problema (ovviamente ).
Praticamente ho una serie di (che aggiungo a runtime tramite un button, non sò se può aiutare questa info)

<div class="col-xs-2">
               <input type="text" class="form-control col-sm-8" id="Partnumber1.1" name="Partnumber1.1" placeholder="Part number" data-ordine="1"/>
               <a class="aggiungiPn"><img src="./images/plus2.jpg" alt="Add order" height="22" width="22"></a>
  </div>

quando clicclo sul tag <a> (tutti i tag <a> hanno la classe "aggiungiPn", cioè sono creati così <a class="aggiungiPn"> ) dovrebbe aggiungermi un altro input nel div nel quale è avvenuto il click.
Questo lo faccio con questo codice jquery

$( ".aggiungiPn" ).click(function() {
                    //$( ".aggiungiPn" ).css( "border", "3px solid red" );

                    $(this).prev().after( "<input type="text">" );
                    
                });

Il problema è che se clicco sul tag <a> del primo div creato tutto funziona, se invece clicco sul tag <a> del secondo terzo e così via, non mi scatta la funziona jquery. Ma il selettore è scritto bene e non riesco a capire qual è il problema.

[AtoXx]

Soluzione trovata, praticamente il problema è che aggiungo dinamicamente il codice html

<div class="col-xs-2">
     <input type="text" class="form-control col-sm-8" id="Partnumber1.1" name="Partnumber1.1" placeholder="Part number" data-ordine="1"/>
     <a class="aggiungiPn"><img src="./images/plus2.jpg" alt="Add order" height="22" width="22"></a>
</div>

e quindi per reagire all'evento bisogna scrivere la funzione jquery così

$(document).on('click', ".aggiungiPn", function() {
// codice js
});