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

时间:2013-08-02 10:16:11

标签: jquery jquery-selectors

使用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");
});

当我点击浏览器中的链接时,没有任何反应,甚至没有错误。

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

5 个答案:

答案 0 :(得分:3)

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

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

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

答案 1 :(得分:0)

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

起初看起来没什么不对劲。您可以更有效地更改代码:

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

答案 2 :(得分:0)

使用事件委托

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

答案 3 :(得分:0)

您是否尝试将其包裹在$(document).ready(function(){/*code here*/})中? 看看:http://jsfiddle.net/REFh5/

答案 4 :(得分:0)

尝试跟随(我刚刚更改了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/

希望它有所帮助。