jquery - 尝试捕获锚标记上的点击事件

Question

当使用 Google Chrome 的 Web 开发人员工具查看时，我有以下内容似乎可以生成正确的 html：

$("<a />", {
    text: "link text goes here"
}).attr({
    href: "#",
    class: "some_class_name",
    id: "divSlot-" + data.id
}).appendTo("#divSlots");

我正在尝试向标签添加点击事件：

$(".some_class_name").on("click", function(event) {
    event.preventDefault();
    alert("hello");
});

当我在浏览器中单击链接时，什么也没有发生，甚至没有错误。

我做错了什么或错过了什么？

Answer 1

您需要使用基于事件委托的事件注册，因为您正在处理动态添加的元素。

您使用的.on()只是 的简写$(".some_class_name").click(...)，要使用事件委托，您需要使用不同的语法.on()

$(document).on("click", ".some_class_name", function(event) {
    event.preventDefault();
    alert("hello");
});

Answer 2

你能添加它产生的html输出吗？

乍一看似乎没有什么不对。您可以更有效地将代码更改为：

$(".some_class_name").click(function(event) {
    event.preventDefault();
    alert("hello");
});

Answer 3

使用事件委托

$("document").on("click",".some_class_name", function(event) {
    event.preventDefault();
    alert("hello");
});

Answer 4

你试过把它包起来$(document).ready(function(){/*code here*/})吗？看看：http: //jsfiddle.net/REFh5/

Answer 5

尝试关注（我刚刚更改了 data.id 并且工作正常）

$("<a />", {
   text: "link text goes here"
}).attr({
   href: "#",
   class: "some_class_name",
   id: "divSlot-21"
}).appendTo("#divSlots");

$(".some_class_name").on("click", function(event) {
   event.preventDefault();
   alert("hello");
});

这里的工作示例：http: //jsfiddle.net/SF6pN/

希望能帮助到你。