javascript - ng-if 更改后重新加载 Jquery

Question

我正在开发一个网站，该网站使用 ng-if 语句来更改基于的表单中的元素

<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 需要绑定(bind)到这些按钮，但是 ng-if 使得 jQuery 只绑定(bind)到页面加载时选择的单选按钮。如果您随后更改单选按钮，则显示的新按钮不会绑定(bind)其功能。

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

有没有办法在 ng-if 语句更改后加载 jQuery，以便按钮单击函数按其应有的方式绑定(bind)？

Answer 1

当前您使用的称为“直接”绑定(bind)，它仅附加到代码进行事件绑定(bind)调用时页面上存在的元素。

您需要使用Event Delegation使用.on()动态生成元素时的委托(delegate)事件方法。

一般语法

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

示例

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

您应该使用最接近的静态容器来代替 document 以获得更好的性能。

但是，我建议您使用 ngClick 而不是使用 jQuery 绑定(bind)事件。