dynamic - 如何使用 jQuery 将单击事件 Hook 到动态创建的 anchor 标记

Question

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

$.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> 使用react的事件处理程序元素，即使它们是在代码执行之后添加的:

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

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