jquery .append（）工作然后消失？

我正在为FreeCodeCamp的Wikiviewer工作，并且遇到了一个奇怪的问题。jquery .append（）工作然后消失？

我刚才就在这里运行的一个基本的例子（它现在是不是漂亮可言，概念恰恰证明）： http://codepen.io/msmith1114/pen/peBKxM?editors=1111

IM追加这里（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>'); 
     })

所以这个真的有2个问题（如果你用的控制台打开试试吧，你会看到）

月1日主要问题：该列表将显示（3个环节），然后消失..这是没有意义的。 jquery.append（）应该让他们在那里尽我所知，因为即时通讯将它们追加到我的html部分

第二个问题：它似乎有时getJSON不会返回任何内容。我认为在.done（）部分中包装我的语句将确保不执行任何操作，直到Wikipedia API返回所有内容都可以工作，但有时您只是不会收回任何内容。这是一个WikiAPI问题或其他什么？（顺便说一句，如果它不起作用，只需在搜索框中输入“cat”或其他内容并再次搜索，它将最终工作，直到遇到上述问题1）。

谢谢。即时通讯仍然学习JS/JQuery的，所以我有点困惑，为什么这不起作用。

来源

2017-04-06 msmith1114

第一个问题是因为你已经迷上了点击提交按钮。这不会停止表单提交，因此页面会重新加载。使用submit事件form元素的替代，并确保调用preventDefault()所提供的事件：

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

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

至于第二个问题，这可能是一个限制的问题。没有看到一个错误，这将是不可能的，给你一个明确的答案

来源

2017-04-06 15:58:39

这似乎...喜欢也许我做错了，如果这是必要的？除此之外，有没有更好的方法可以做到这一点？或者这是如何在大多数网站上完成的？ – msmith1114

这是应该如何做。它只是改变你的代码的一行，并添加另一个 –

这里有一个更新的codepen使用它：http://codepen.io/anon/pen/gmJvvX?editors=1111 –

jquery .append（）工作然后消失？

回答

相关问题