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

我有一个动态创建的锚定标记，该锚定标记具有如下onclick事件：

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

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

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

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

$（'#'+educationHistoryId）.append（“+degreeTitle++”）；

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

TypeError：对未实现接口HtmleElement的对象调用“单击”。

我怀疑有角色逃逸问题，但无法解决

已添加

生成的html：

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

A级

尝试用以下内容替换该行，以便事件按如下方式绑定：

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

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

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

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

var$link=$（“”）；
$link.on（“单击”，函数（）{
删除EducationLevel（educationHistoryId）；
});
$（'#'+educationHistoryId）.append（“+degreeTitle+”）.append（$link）；

---

在我的（非常简化的）测试中，这似乎是可行的：

是否真的需要用一行代码来完成这项工作？ 我建议以下解决方案：

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

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

var$anchor=$（document.createElement（“a”））.attr（“href”，“javascript:”）.text（“Delete”）.on（“单击”，函数（）{
警报（“单击！”）；
警报（“educationHistoryId:+educationHistoryId”）；
});
$（“body”）。追加（“+degreeTitle+”，$anchor）；

这非常有效：

---

我总是试图阻止使用内联事件处理程序。在我看来，这是一种糟糕的做法。

给span一节课，并使用事件委托

然后，您可以将单击事件绑定到现有的父级（我假设在事件处理程序附件发生时存在带有

id=“#”+educationHistoryId

的元素），然后将事件委托给新添加的链接

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

$（“#”+educationHistoryId）。在（“单击”，函数（）{
删除EducationLevel（educationHistoryId）；
});

你能不能快速修改一下它的全部功能，让我们知道变量是如何设置的，链接的html是什么样子的？查看源代码以确保字符正确转义是否确实定义了

deleteEducationLevel

？请发布所有代码。您是否尝试过使用bind（）而不是使用内联脚本？也许这可以避免逃避问题？有多个锚定标记是动态创建的，并且具有唯一的id。是的，如果你用这6行替换你的一行JS，这应该仍然有效。有效..谢谢GeniusHooray！没问题D