リロードjQueryのNG-場合、変更

Question

をした後、私は私の問題は、必要のある私は、いくつかのjQueryを持っている

<div class="column full"> 
         <?php 
         echo $this->Form->input('company_type', array(
          'type' => 'radio', 
          'options' => array(
           'partnership' => 'Partnership', 
           'sole_trader' => 'Sole Trader', 
           'limited_company' => 'Limited Company' 
          ), 
          'ng-model' => 'companyType', 
          'legend' => 'Company Type' 
         )); 
         ?> 
</div> 
<div ng-if="companyType == 'sole_trader'"> 
    ... 
    echo $this->Form->button('Find Address' , array('type' => 'button', 'id' => 'findTraderAddress')); 
    ... 
</div> 
<div ng-if="companyType == 'partnership'"> 
    ... 
    echo $this->Form->button('Find Address' , array('type' => 'button', 'id' => 'findPartnerAddress')); 
    ... 
</div> 
<div ng-if="companyType == 'limited_company'"> 
    ... 
    echo $this->Form->button('Find Address' , array('type' => 'button', 'id' => 'findCompanyAddress')); 
    ... 
</div> 

に基づいてフォーム内の要素を変更するには、NG-if文を利用しているサイトに取り組んでいますこれらのボタンにバインドするには、ng-ifを使用するとjQueryはページロード時にラジオボタンが選択されるバインドのみになります。ラジオボタンを変更した場合、表示されている新しいボタンにはその機能がバインドされていません。

$('#findTraderAddress').click(function() { 
     console.log('clicked'); 
}) 
$('#findPartnerAddress').click(function() { 
     console.log('clicked'); 
}) 
$('#findCompanyAddress').click(function() { 
     console.log('clicked'); 
}) 

それが必要として、ボタンのクリック機能がバインドされますので、NG-if文の変更後のjQueryをロードする方法はありますか？

Answer 1

現在、使用しているのは、コードがイベントバインディング呼び出しを行うときにページに存在する要素にのみアタッチする「直接」バインディングと呼ばれます。

要素を動的に生成する場合、.on()委任イベントアプローチを使用してEvent Delegationを使用する必要があります。

一般的な構文

$(document).on('event','selector',callback_function) 

例は

$(document).on('click', "#findTraderAddress", function(){ 
    console.log('clicked'); 
}); 

documentの代わりに、あなたは、パフォーマンスを向上させるために最も近い静的なコンテナを使用する必要があります。

の場合、jQueryを使用してイベントをバインドする代わりに、ngClickを使用することをお勧めします。

Answer 2

jgeryの代わりにng-clickを使用できます