Question

使用Google Chrome浏览器的网络开发者工具查看时，我有以下内容似乎可以生成正确的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/

希望它有所帮助。

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

5 个答案: