正文

Angular 5 和 jQuery：（点击）不调用函数

 2023-02-22  162

关键词：

【中文标题】Angular 5 和 jQuery：（点击）不调用函数【英文标题】：Angular 5 and jQuery: (click) not calling function 【发布时间】：2020-06-02 02:13:21 【问题描述】：

我目前正在使用 Angular 5 和 jQuery。我通过 jQuery 创建了一个动态 div，并将其附加到一个 div 中。

var push_div = '<div class="col-md-6">
                <span style="color: green;">' + 
                droppedItemID + '</span>&nbsp;
                <a href="javascript:void(0)" 
                (click)="removeContent()">X</a>
                </div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

当我点击链接时，removeContent 函数没有调用。

removeContent() 
    console.log("function called");

【问题讨论】：

你能创建一个 Stackblitz 示例吗？链接文本或链接文字参考：***.com/questions/1070760/… @King 如果我使用onclick，那么它会显示Uncaught ReferenceError: removeContent is not defined 点我或 【参考方案1】：

这是设计使然。 Angular 不处理字符串中定义的绑定，例如 innetHTML 绑定。 (click) 绑定不会在您的情况下处理。

你可以这样做：

var dropZoneID = 'dropZone'
var droppedItemID = 'droppedItemID'

function removeContent() 
  console.log('removeContent');


var push_div = '<div class="col-md-6"><span style="color: green;">' + droppedItemID + '</span>&nbsp;<a href="javascript:void(0)">X</a></div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

// Using $(document).on(...) to bind events to dynamically created elements
$(document).on('click', $(push_div).find('a').eq(0), function() 
  removeContent()
);

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id="dropZone"></div>

更多详情：

https://***.com/a/37676847/1331040

https://***.com/a/50809586/1331040

【讨论】：

我确实喜欢$(push_div).click(function() this.removeContent() );，但它不起作用。你能再看看吗？我更新了答案并添加了一个sn-p。请看一下。【参考方案2】：

从<a> 标记中删除 -> href="javascript:void(0)"。

【讨论】：

angular-directive - jQuery 点击事件不更新范围

】angular-directive-jQuery点击事件不更新范围【英文标题】：angular-directive-jQueryclickeventnotupdatingthescope【发布时间】：2016-09-2704:47:38【问题描述】：在指令中，单击jQuery元素时，我正在更新范围。但它不起作用。这样做的正确方法是... 查看详情

angular1jquery实现无限表单效果

1、需求描述：（1）点击页面一个按钮，向后台发送请求，获取内容；（2）内容有input和select，select有默认项和备选项，其中备选项不显示，点击默认项右侧三角号后，备选项展示；（3）每个备选项右侧还有三角号，点击后向后... 查看详情

6angular1jquery实现无限表单效果

点击事件在 Angular 5 中无法正常工作

】点击事件在Angular5中无法正常工作【英文标题】：onclickeventsnotworkingproperlyinAngular5【发布时间】：2018-09-2223:06:31【问题描述】：我在下面有一个截图，我用HTML/CSS复制了它。我为上面的截图创建了fiddle。小提琴的工作方式是当我... 查看详情

Angular 5 在每次路线点击时滚动到顶部

】Angular5在每次路线点击时滚动到顶部【英文标题】：Angular5ScrolltotoponeveryRouteclick【发布时间】：2018-06-1109:52:13【问题描述】：我正在使用Angular5。我有一个仪表板，其中有几个部分的内容很小，而几个部分的内容非常大，以至... 查看详情

Laravel 5 和 Angular 从控制器获取 JSON

】Laravel5和Angular从控制器获取JSON【英文标题】：Laravel5andAngularGettingJSONFromController【发布时间】：2016-04-2001:38:32【问题描述】：这更像是一个概念问题，如果不够具体，我深表歉意。我来自Jquery/AngularJS背景；通常我在做前端的工... 查看详情

Angular 5：如何在 Jest 测试中导入 jQuery？

】Angular5：如何在Jest测试中导入jQuery？【英文标题】：Angular5:HowtoimportjQueryinJesttest?【发布时间】：2018-07-2506:21:57【问题描述】：我有一个使用CalendarService的角度组件。当组件初始化时，我调用一个“calendarService.init()”方法。这... 查看详情

Angular 5服务变量未定义

】Angular5服务变量未定义【英文标题】：Angular5servicevariableundefined【发布时间】：2018-11-1602:08:23【问题描述】：使用Angular5，我有2个组件和一个共享服务，我想将数据从一个组件传递到另一个组件。我在接收组件的oninit中订阅了... 查看详情

如何根据Angular中一个组件中的点击事件更改其他组件中的数据？

】如何根据Angular中一个组件中的点击事件更改其他组件中的数据？【英文标题】：HowtochangedatainothercomponentsbasedonclickeventinonecomponentinAngular?【发布时间】：2018-06-0802:44:42【问题描述】：我是Angular的初学者，我开发了一个Angular4/5... 查看详情

点击取消按钮时删除/关闭 Angular 或 Ionic 5 中的搜索栏

】点击取消按钮时删除/关闭Angular或Ionic5中的搜索栏【英文标题】：Remove/ClosesearchbarinAngularorIonic5whenhittingcancelbutton【发布时间】：2020-06-1922:48:02【问题描述】：我在移动设备上使用Ionic，我想确保当您点击取消按钮时，搜索栏会... 查看详情

如何将 Angular 5 中的点击数据从父组件传递到子组件？

】如何将Angular5中的点击数据从父组件传递到子组件？【英文标题】：Howtopassdataonclickinangular5fromparentcomponenttochildcomponent?【发布时间】：2019-02-1003:51:28【问题描述】：我想将父组件的按钮单击数据传递给子组件，并将子组件呈现... 查看详情

Angular 5 - 有条件的文本区域

】Angular5-有条件的文本区域【英文标题】：Angular5-conditionalrequiredtextarea【发布时间】：2018-10-2117:32:02【问题描述】：如果复选框被点击比textarea的出现和需要的[需要]=“otherVendorsChecked==真真：假”强>如果我选择复选框，比取消... 查看详情

angular笔记_5(全选/反选)

全选和反选BUG：当鼠标点击其中一个选项后，在点击全选按钮，该选项失效 <!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title> <scriptsrc="http://cdn.static.runoob.c 查看详情

Angular 1.3 和最低要求的 JQuery 版本

】Angular1.3和最低要求的JQuery版本【英文标题】：Angular1.3andminimalrequiredJQueryversion【发布时间】：2015-05-1705:31:15【问题描述】：我们有一个庞大的系统，完全用Angular开发，从头开始（没有非Angular遗留代码，没有其他非Angular框架）... 查看详情

Angular JS JQuery 模式未显示

】AngularJSJQuery模式未显示【英文标题】：AngularJSJQuerymodalnotshowing【发布时间】：2020-04-2702:14:24【问题描述】：我有以下设置：页面名为admin.php，我在其中加载所有脚本和CSS在该页面上有<ng-view>路由，可根据点击的内容... 查看详情

Angular 应用程序中的引导程序 5

】Angular应用程序中的引导程序5【英文标题】：Bootstrap5inAngularApplication【发布时间】：2021-09-0521:45:54【问题描述】：自第5版起，Bootstrap框架已将jQuery作为一项要求移除。我想知道此更改如何影响Angular应用程序？我们可以在Angular... 查看详情

javascript---angular和jquery

Angular 三层模式Mmodel和data数据层，Vview视图层，Ccontroller 控制器，程序主逻辑 ,通过指令扩展HTML，通过表达式绑定数据到HTML。View(视图),即HTML。Model(模型),当前视图中可用的数据，在表达式输出数据。Controller(控制... 查看详情

使用 Angular 和 jquery 验证输入字段？

】使用Angular和jquery验证输入字段？【英文标题】：validatinginputfieldsusingangularandjquery?【发布时间】：2016-08-2521:49:30【问题描述】：我正在使用angular.js和jQuery来验证使用ng-repeat创建的表单中的用户输入。所以基本上我有一个字符串... 查看详情