超链接上的 event.preventDefault() 不起作用答案

【问题标题】：event.preventDefault() on hyperlink not working超链接上的 event.preventDefault() 不起作用
【发布时间】：2014-07-02 14:18:30
【问题描述】：

我知道这个问题已经解决了很多次，这就是为什么我阅读了大多数已经在 * 上打开的关于这个问题的主题，但没有任何建议对我有帮助。

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

<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);
        }
    }

【问题讨论】：

代码看起来不错。 dom准备好了吗？您不会动态添加任何 div.politician 元素吗？
工作得很好 -> jsfiddle.net/Y3drb
@billyonecan 实际上我愿意。现在我正在编辑开篇文章以添加我用来生成元素的代码。

标签： javascript jquery html javascript-events event-handling

【解决方案1】：

由于是动态添加元素，所以需要使用event delegation：

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

【讨论】：

【解决方案2】：

这是发生的，因为当您向其添加点击事件侦听器时，您的 html 未加载。将代码包装在 document.ready 函数中，如下所示：

$(function(){
     $('.politician a').click(function (e) {

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

});

http://plnkr.co/edit/gist:1986619?p=preview

【讨论】：