动态创建的锚标记上的 Onclick 事件答案

【问题标题】：Onclick event on dynamic created anchor tag动态创建的锚标记上的 Onclick 事件
【发布时间】：2014-07-14 14:56:25
【问题描述】：

我有一个动态创建的锚标签，这个锚标签有一个像这样的 onclick 事件：

$('#'+educationHistoryId).append("<span>"+degreeTitle+"</span>" +  "<a href='javascript:void(0)' onclick='deleteEducationLevel(" + educationHistoryId + ");'>Delete</a>");

当我点击这个锚点时，我得到了 js 错误提示：

TypeError：在未实现接口 HTMLElement 的对象上调用了“点击”。

我怀疑某些字符转义问题但无法解决。

已添加

生成的html：

<div id="ff8081814734be020147357beda5002b"><span>A Level</span><a onclick="deleteEducationLevel(ff8081814734be020147357beda5002b);" href="#">Delete</a></div>

【问题讨论】：

您能否快速调整一下它的全部功能，以便我们知道变量是如何设置的以及链接的 html 是什么样的？查看您的源代码以确保字符正确转义
您确定deleteEducationLevel 已定义吗？请发布您的所有代码。
您是否尝试过使用 bind() 而不是使用内联脚本？ api.jquery.com/bind 也许这样可以避免转义问题？

标签： javascript jquery html html-escape-characters

【解决方案1】：

尝试用以下内容替换该行，以便像这样绑定事件：

var $link = $("<a href='javascript:void(0)'>Delete</a>");

$link.on("click", function() {
    deleteEducationLevel(educationHistoryId);
});

$('#'+educationHistoryId).append("<span>"+degreeTitle+"</span>").append($link);

在我的（非常简化的）测试中，这似乎有效：http://jsfiddle.net/E7LRt/

【讨论】：

有多个动态创建并具有唯一 ID 的锚标签。
是的，如果你用这 6 行替换你的 JS 行，这应该仍然有效。
工作中..感谢天才
万岁！没问题。 :D

【解决方案2】：

是否真的需要只使用一行代码？我建议以下解决方案：

var $anchor = $(document.createElement("a")).attr("href","javascript:").text("Delete").on("click",function() {
    alert("clicked!");
    alert("educationHistoryId: " + educationHistoryId);
});

$("body").append("<span>" + degreeTitle + "</span> ",$anchor);

这很好用：Fiddle

我总是尽量避免使用内联事件处理程序。我认为这是不好的做法。

【讨论】：

【解决方案3】：

给 span 一个类并使用事件委托。

然后您可以将 click 事件绑定到现有父级（我假设在发生事件处理程序附件时存在带有 id= "#"+educationHistoryId 的元素），然后将该事件委托给新添加的链接。

$("#"+educationHistoryId).on("click", <class>, function(){
 deleteEducationLevel(educationHistoryId);
});

【讨论】：