PHPから呼び出されるjQueryコードは実行されません

Question

私は（もちろん）複数の​​PHPテンプレートで構成されているWordpressサイトを開発しています。私は問題を抱えている特定のテンプレート部分は、この行で呼び出されます。

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

電卓行-sa.phpの内容は以下のとおりです。

<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 --> 

そしてその背後にあるのjQueryコードis

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

私の問題は、PHP内部のimg要素にあります。ページが最初に読み込まれると、そのジョブが実行され、そのページの行が削除されます。しかし、さらに行を追加すると、JavaScriptのコードは.form-content内でもう実行されないようです。何が間違っているかについてのアイデア？

Answer 1

JavaScriptを使用して行を追加すると仮定すると、イベント委任が必要です。偶数ハンドラをバインドする瞬間に要素が存在せず、それらを追加すると、clickイベントは自動的にバインドされませんイベントの委任を使用しない限り、

あなたは簡単に、たとえば使用していることを変更することができます。ここ.form-content要素は、ページの読み込み上に存在することがあり

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

注意。そうでない場合は、次のようなものを使用することもできます。

// 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(); 
});