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

效果很好：Fiddle

我总是试图阻止使用内联事件处理程序。在我看来这是不好的做法。

Answer 3

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

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

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

关于动态创建锚标记的Onclick事件

3 个答案: