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

Question

我有一个列表，其中包含一些带有介绍性的文章。单击时，我指的是锚#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 的数据全文（例如）属性中，然后通过

 $("#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'));
        });
    });
});

完整的演示在这里>> jsfiddle

Answer 2

如果要将事件附加到元素，请尝试委托事件方法。clickli

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