JQuery：在列表中附加事件数据

Question

我有一个列表，其中包含一些带有introtext的文章。点击，我引用一个锚#article。 此锚点的内容应替换为文章点击的全文。

但是，＃article始终显示最后一个元素的全文。 （row.fulltext指向最后一个元素） 有什么想法吗？

$.each( result, function(i, row) {
    var li = '<li><a href="#article">'+row.introtext+'</a></li>';
    $('#news-list').append(li).on("click", function(event) {
        $("#article-content").html(row.fulltext);
    });
});

提前致谢！

Answer 1

您应该将row.fulltext的内容存储在li的data-fulltext（例如）属性中，然后通过

访问它

 $("#article-content").html($(this).data('fulltext'));

或

$("#article-content").html($(this).attr('data-fulltext'));

或者您也可以将它存储在通过id或DOM定位链接到li的隐藏元素中，以便您可以通过DOM遍历或id访问它。

修改

问题似乎来自事件绑定（我认为选择器过于通用，它会在li上多次绑定事件。 我会这样做（跨度代表你的“结果”变量）：

$(function(){
    $('span').each(function(){
        $this = $(this);
        var $li = $('<li data-fulltext="'+$this.data('fulltext')+'"><a href="#article">'+$this.html()+'</a></li>');
        $('#news-list').append($li);
        $li.on('click',function(){
            $('#article-content').html($(this).data('fulltext'));
        });
    });
});

<强> Full demo here >> jsfiddle

Answer 2

如果您想将click事件附加到li元素，请尝试 委托事件方法 。

$('#news-list').append(li).on('click','li a', function(event) {
        $("#article-content").html(row.fulltext);
    });