javascript - 第二次搜索后维基百科查看器结果重复

Question

我正在尝试构建一个 wiki 查看器，但遇到了一个小问题。

我正在使用维基百科 API。输入搜索输入后，用户会看到 5 篇可能的文章(文章的标题和第一句话)，点击它们后，他们应该被重定向到维基百科页面并查看完整的文章。

第二次搜索(输入新词)后我遇到了问题。页面底部有空的 div，每当用户尝试单击所需的文章以进一步阅读时，都会打开两个维基百科页面。

有什么建议吗？

$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=' + inputVal + '&callback=?', function(data) {
                for (var i = 0; i < data[1].length; i++) { 
                    $('<div class="item"><h4></h4><p></p></div>').appendTo(".search-area");
                    $('h4').eq(i).text(data[1][i]);
                    $('p').eq(i).text(data[2][i]);
                };
                $('.item').on('click', function(e) {
                    e.preventDefault();

                    var wikiLoc = $(this).find('h4').text();
                    window.open('https://en.wikipedia.org/wiki/' + wikiLoc);
                });

这里是完整代码:http://codepen.io/nikasv/pen/pbzrzj

Answer 1

您可以添加添加

$(".item").remove();

在第 3 行中删除所有先前的结果

$(document).ready(function() {
        $('button').eq(1).on('click', function(e) {
            $(".item").remove();
            e.preventDefault();
            var inputVal = $('input').val();
    ....

http://codepen.io/Crazy/pen/VjZzjG/