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

Posted 2023-05-09

【中文标题】按钮的 Jquery 单击事件在 ng-if div 中不起作用

【英文标题】：Jquery click event for button is not working inside ng-if div

【发布时间】：2017-12-04 06:29:26

【问题描述】：

我的项目中有以下代码sn-p

<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 文件中的。）

【问题讨论】：

我觉得是因为div是动态添加的，能不能分享一下你的按钮点击脚本，让我更好的帮忙

是的，当 div（及其内容，即按钮）尚未出现在页面上时，jquery 很可能会尝试绑定 click 事件。另外，我建议坚持使用角度并使用 ng-click

我同意。目前，jquery 语句尝试附加单击事件，该按钮肯定不是由 ng-if 创建的。尝试使用 ng-show 或 ng-hide 而不是 ng-if，只是为了证明这一点。 ng-show 和 ng-hide 不修改 DOM 并且始终存在于 DOM 中。

@TSungur ng-show 正在工作，但要求是使用 ng-if 实现

@emanek 有没有办法用 ng-if 和 jquery 选择器来做到这一点

【参考方案1】：

出现这个问题是因为ng-if动态添加元素到DOM如果条件为真，jquery Direct事件(.click())不能添加到动态添加的元素中所以必须使用委托事件(@ 987654322@) 使其适用于动态添加的元素。

请参阅link 了解有关直接和委托活动的更多信息

用.on()替换你的Jquery点击事件

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

alert('dsfds');

);

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

但是，我仍然想知道为什么您需要同时使用 Jquery 和 Angular，这并不是很好的做法。

【参考方案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

【参考方案3】：

如果你在谈论 angular2+，为了避免你应该在 ngAfterViewChecked() 函数中编写你的 jquery 代码，不要忘记从 'angular/core' 导入它，因为你的所有 dom 都是在 jquery 函数之前加载的，但是我不建议您将 jquery 与 angular 一起使用