jQuery-Code von PHP aufgerufen wird nicht ausgeführt

Question

Ich entwickle eine Wordpress-Website, die (natürlich) besteht aus mehreren PHP-Vorlagen. Die besondere Vorlage Fragment ich Probleme habe mit dieser Linie genannt wird:

<script id="templatehidden">          
    <?php get_template_part('fragments/calculator', 'row-sa'); ?> 
</script> 

und die Inhalte der Rechner-Reihe-sa.php sind:

<div class="form-row pricingrow select-multiple"> 
<div class="form-controls"> 
<img class="remove-field-sa" style="float: left; margin-right: 30px;" src="http://45.32.89.214/wp-content/uploads/2016/04/minus.png"> 
<i style="margin-left: 50px;" class="cardinal"></i> 
    <select name="field-followers[]" class="select followerselect"> 
     <?php foreach ($options as $option) : ?> 
      <option value="<?php echo $option[ 'value' ] ?>"><?php echo $option[ 'label' ] ?></option> 
     <?php endforeach; ?> 
    </select> 
    <b class="fa fa-caret-down" aria-hidden="true" style="color: #747474";></b>  
    <span class="acctprice"></span> 
</div><!-- /.form-controls --> 

Und der jQuery-Code dahinter ist

$('.remove-field-sa').click(function() {   
     $(this).closest('.form-row').remove(); 
    }); 

Mein Problem ist mit dem Element img innerhalb der PHP. Wenn die Seite zum ersten Mal geladen wird, führt sie ihren Job aus und entfernt die Zeile, in der sie sich befindet. Nachdem ich jedoch weitere Zeilen hinzugefügt habe, scheint kein JavaScript-Code mehr in .form-Inhalten ausgeführt zu werden. Irgendwelche Ideen, was falsch ist?

Answer 1

Angenommen, Sie fügen die Zeilen mit Javascript hinzu, benötigen Sie Ereignisdelegierung: Im Moment binden Sie Ihre gerade Handler, die Elemente nicht vorhanden und wenn Sie sie hinzufügen, wird das Ereignis click nicht automatisch an diese neuen gebunden Elemente, sofern Sie keine Ereignisdelegierung verwenden.

können Sie leicht, dass zum Beispiel unter Verwendung ändern:

$('.form-content').on('click', '.remove-field-sa', function() {   
    $(this).closest('.form-row').remove(); 
}); 

Beachten Sie, dass hier das .form-content Element auf Seite Last vorhanden sein muss. Wenn nicht, können Sie auch Folgendes verwenden:

// Any parent element that is present at page-load and will contain the child elements will do. 
$('body').on('click', '.remove-field-sa', function() {   
    $(this).closest('.form-row').remove(); 
});