javascript - 超链接上的 event.preventDefault() 不起作用

Question

我知道这个问题已经被解决了很多次，这就是为什么我阅读了 Stack Overflow 上已经开放的关于这个问题的大部分主题，但没有一个建议对我有帮助。

我有一个 div 元素列表，每个元素都包含一个超链接和一个带有附加信息的 span 元素。 span 元素最初是隐藏的，只要单击同级 anchor 元素就需要切换它们。

<div class="politician">
    <a href="">
        Антонијо Милошоски
    </a>
    <span class="additional" style="display: none">
        2013ВМРО-ДПМНЕ1997-1
    </span>
</div>
<div class="politician">
    <a href="">
        Силвана Бонева
    </a>
    <span class="additional" style="display: none">
        2013ВМРО-ДПМНЕ1991-1
    </span>
</div>

这是我编写的用于处理隐藏元素切换的 jQuery 代码:

    $('.politician a').click(function (e) {
        e.preventDefault();
        var $this = $(this).parent().find('span');
        $(".politician span").not($this).hide();
        $this.toggle();
    });

我的问题已经在标题中说明了。我期望显示隐藏的元素，但页面却被刷新。我想我使用 preventDefault() 方法的方式一定有问题。

编辑

这是生成 div.politician 元素的代码。

        function populateList(politicians) {
        var politlist = $("#list").html("");
        for (var i in politicians) {
            var person = politicians[i];
            var politinfo = "<div class=\"politician\"><a href=\"\">" + person.name + " " + person.surname + "</a><span class=\"additional\" style=\"display: none\">" + person.lastserved;

            for (var j in person.member)
            {
                var membership = person.member[j]
                politinfo += membership.party + membership.enrol + membership.leave;
            }

            politinfo += "</span></div>";
            $(politinfo).appendTo(politlist);
        }
    }

Answer 1

由于您要动态添加元素，因此需要使用 event delegation :

$('#list').on('click', '.politician a', function(e) {
   // your code 
});