Question

在jQuery循环中，我试图将click事件附加到动态创建的锚标记中，该标记包含在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，您的<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"));
    });

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

3 个答案: