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

Question

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

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

当我单击此锚点时，出现js错误消息：

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

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

添加

生成的html：

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

Answer 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/

Answer 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);

这很棒： 提琴

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

Answer 3

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

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

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