Question

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

我有一个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);
        }
    }

Answer 1

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

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

Answer 2

发生这种情况是因为在向其添加click事件侦听器时未加载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

event.preventDefault（）在超链接上不起作用

2 个答案: