Reload Jquery после нг-если изменение

Question

Я работаю на сайте, что делает использование нг-если заявление изменить элементы в форме, основанной на

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

Мой вопрос У меня есть JQuery, который необходимо для привязки к этим кнопкам, однако ng-if делает так, что jQuery связывается только с какой-либо радиокнопкой, выбранной при загрузке страницы. Если вы измените переключатель, то новая кнопка не будет привязана к ней.

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

Есть ли способ, чтобы загрузить JQuery после нг-если изменения оператора так, чтобы функция кнопки щелчок мыши получает связаны, как должно?

Answer 1

В настоящее время то, что вы используете, называется «прямой» привязкой, которая будет прикрепляться только к элементу, существующему на странице, в момент, когда ваш код вызывает вызов привязки события.

При создании элементов динамически необходимо использовать Event Delegation с использованием метода делегированных событий .on().

Общий синтаксис

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

Пример

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

На месте document вы должны использовать ближайший статический контейнер для лучшей производительности.

Однако, я бы рекомендовал вам использовать ngClick вместо события привязки с помощью jQuery.

Answer 2

Вы можете использовать ng-click вместо jQuery