Question

我的项目中有以下代码段

<div class="form-horizontal well text-center" id="func_85" ng-if="prmissionlist.indexOf('chkfunction_85') >= 0">
    <button class="btn btn-primary" type="button" id="btn_branch_save">
        Save
    </button>
    <button class="btn btn-primary" type="button" id="btn_new_branchcancel">
        CANCEL
    </button>
</div>

但是按钮单击在ng-if div内部不起作用（使用jQuery选择器在js文件中写入按钮单击。）

Answer 1

出现此问题是因为如果条件为true，ng-if会动态地将元素添加到DOM，而jquery Direct事件（.click（））无法添加到动态添加的元素中，因此您必须使用委托事件（.on()）使其适用于动态添加的元素。

有关直接和委托事件的更多信息，请参阅link

用.on()

替换您的Jquery点击事件

$('.form-horizontal').on('click','#btn_branch_save',function(){

alert('dsfds');

});

作为替代方案，您还可以使用ng-show，它将在加载DOM时创建元素，并将可见性应用为隐藏，但在Jquery中使用委托事件总是好的。

但是，我仍然想知道为什么你需要一起使用Jquery和Angular，这不是很好的做法。

Answer 2

由于ng-if创建了nested scopes，该按钮无效。

来自您的评论： @TSungur ng-show正在运行，但要求是使用ng-if

实施

您可以使用ng-show代替ng-if，因为这次只是解决问题。

阅读更多讨论

AngularJS: ng-if not working in combination with ng-click?

jQuery click events not working with AngularJS

Answer 3

如果您正在谈论angular2 +，并且为了避免您应该在ngAfterViewChecked（）函数中编写jquery代码，请不要忘记从“ angular / core”导入它，并确保所有dom在jquery函数之前都已加载，但是我不建议您将Jquery与angular一起使用

按钮的Jquery click事件在ng-if div中不起作用

3 个答案: