JQuery:以编程方式添加的 anchor 与我的点击功能无关

Question

我是 JQuery 新手，我正在尝试使用它在旧的 Web 应用程序中实现增强功能。

我从服务器收集字符串列表，并将每个字符串呈现在自己的 anchor 标记中，以便它们出现在逗号分隔的列表中。我将生成的标记分配给跨度的内部 html:

$.getJSON("http://domain/restOfURL",
    function(data){
        var anchorString = "";
        $.each(data.companies, function(i,companies){                                    
            if (i > 0)
            {
                anchorString += ", ";
            }
            anchorString += '<a class="sr" href="#">' + companies + '</a>';
        });
        $("#anchorsListSpan").html(anchorString);
    });
});

所有这些都有效，我可以在实时网页上看到 anchor 。 Firebug 中的标记如下所示:

<span id="anchorsListSpan">
    <a class="sr" href="#">ABC</a>
    ,
    <a class="sr" href="#">Apple</a>
    ,
    <a class="sr" href="#">Apollo</a>
</span>

我遇到的问题是任何生成的 anchor 都不会导致我的点击事件触发:

$("a.sr").click(function(){
    alert("link clicked");
});

我注意到，如果我在该 div 中硬编码类似的 anchor ，那么单击事件就会触发。由于某种原因，我以编程方式添加的事件不会导致点击事件触发。

有人看到我在这里做错了什么吗？

感谢您的帮助，

Answer 1

使用 live() 而不是 click():

$("a.sr").live("click", function(){
    alert("link clicked");
});