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需要绑定到这些按钮，但是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

目前您使用的是＆＃34; direct＆＃34;绑定，它只会附加到代码进行事件绑定调用时页面上存在的元素。

在动态生成元素时，您需要使用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

ng-if更改后重新加载Jquery

2 个答案: