javascript - jquery .append() 工作然后消失？

Question

我正在为 FreeCodeCamp 开发 Wikiviewer，但遇到了一个奇怪的问题。

我这里只是运行一个基本示例(现在一点也不漂亮，只是概念证明): http://codepen.io/msmith1114/pen/peBKxM?editors=1111

我在这里附加(在JS代码中，没有太多):

$("#links").append('<li><a href="' + arrayLinks[0] + '">' + arrayName[0] + '</a></li>');
      $("#links").append('<li><a href="' + arrayLinks[1] + '">' + arrayName[1] + '</a></li>');
      $("#links").append('<li><a href="' + arrayLinks[2] + '">' + arrayName[2] + '</a></li>');
      })

所以这确实有两个问题(如果你在打开控制台的情况下尝试它，你就会发现)

第一个主要问题:列表将显示(3 个链接)，然后消失......这没有任何意义。据我所知， jquery.append() 应该将它们留在那里，因为我将它们附加到我的 html 部分

第二个问题:似乎有时 getJSON 不会返回任何内容。我认为将我的语句包装在 .done() 部分将确保在维基百科 API 返回所有内容之前不执行任何操作，但有时您只是得不到任何返回。这是 WikiAPI 问题还是其他问题？ (顺便说一句，如果它不起作用，只需在搜索框中继续输入“cat”或其他内容，然后再次点击搜索，它最终会起作用，直到遇到上面的问题 1)。

谢谢。我还在学习 JS/Jquery，所以我有点困惑为什么这行不通。

Answer 1

第一个问题是因为您沉迷于点击提交按钮。这不会停止表单提交，因此页面会重新加载。请改用 form 元素的 submit 事件，并确保对提供的事件调用 preventDefault():

$(".form-inline").submit(function(e) {
  e.preventDefault();

  // the rest of your code here...
});

至于第二个问题，它可能是一个限制问题。如果没有看到错误，就不可能给您明确的答案