如何使用 jQuery 将点击事件挂钩到动态创建的锚标记

Question

在 jQuery 循环中，我试图将点击事件附加到动态创建的锚标记，该标记包含在 LI 元素中。 LI 本身是在静态 UL 元素内动态创建的。由于某种原因，单击锚点时不会触发任何内容。这是有问题的代码的简化版本：

$.each($.MyProject.cities, function (index, city) {
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").click(function (event) {
        console.info("Anchor clicked!");
        event.preventDefault();
        return false;
    }).html($("<span></span>").text(city.FullName).attr("class", "autoText"))).appendTo($("#visiblecities"));
});

visiblecities 是 UL 元素的 id，cities 是循环在其上迭代的集合。

知道为什么点击事件不起作用吗？

Answer 1

使用event delegation 设置一个事件处理程序，该处理程序将对所有<a> 元素做出反应，即使它们是在代码执行之后添加的：

$('#visibleCities').on('click', 'a', function(event) {
    console.info('Anchor clicked!');
    event.preventDefault();
    return false;
});

不过，正如 gdoron 在 cmets 中提到的，您的 <a> 元素目前没有任何内容，因此它们实际上是不可点击的。

Answer 2

使用.on。

$('a').on('click',function(){
   //code here
});

试试

$('li a').on('click',function()
{
    //code here
});

$.each($.MyProject.cities, function (index, city)
{
    $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)")).appendTo($("#visiblecities"));
});

Answer 3

使用live方法而不是点击

 $.each($.MyProject.cities, function (index, city) {
        $('<li></li>').html($("<a></a>").attr("href", "javascript:void(0)").live("click",function (event) { console.info("Anchor clicked!"); event.preventDefault(); return false; })).appendTo($("#visiblecities"));
    });