1

在一个 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 是循环在其上迭代的集合。

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

4

3 回答 3

4

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

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

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

于 2013-02-25T11:29:04.383 回答
1

使用.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"));
});
于 2013-02-25T11:27:21.743 回答
0

使用实时方法而不是点击

 $.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"));
    });
于 2013-02-25T11:23:47.923 回答