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

Posted 2023-02-22

【中文标题】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

点我或点我！按钮> 参考：***.com/questions/35639174/…

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