appendTo 显示奇怪的行为

Question

我正在尝试做的（目前）是使用搜索字符串

查询维基百科 API

$(document).ready(function() {
  $(".search").on("click", getArticles);

  function getArticles() {
    var searchTerm = $("#wiki-search").val().trim();
    console.log(searchTerm);
    var url = "http://en.wikipedia.org//w/api.php?callback=?";
    $.getJSON(url, {
      action: "query",
      format: "json",
      list: "search",
      srprop: "snippet",
      srlimit: 10,
      srsearch: searchTerm
    }, displayArticles);

并从返回的 JSON 对象中，通过将特定属性（在本例中为 snippet）附加到 div 元素来显示该值：

function displayArticles(wikiJSON) {
  if(wikiJSON.query.searchinfo.totalhits === 0) {
    // resultsDiv.innerHTML = "No results found";
    $("<h3>No results Found</h3>").appendTo("#resultsID");
  }
    else {
      $(wikiJSON.query.search[0].snippet).appendTo("#resultsID");
    }

但是正如在此 pen 中看到的那样，代码段值在屏幕上瞬间闪烁并消失了。谁能解释一下我的代码出了什么问题？

HTML:

      <form role="form">
        <div class="input-group">
          <input class="form-control" id="wiki-search" type="text" placeholder="Enter search string...">
          <span class="input-group-btn">
            <button class = "btn btn-default search">
              <i class = "glyphicon glyphicon-search"></i>
            </button>
          </span>
          <span class="input-group-btn">
            <button class = "btn btn-default random">
              <i class = "glyphicon glyphicon-random"></i>
            </button>
          </span>
        </div>
      </form>
  <div class= "row result-group">
    <div class = "col-xs-12 col-sm-8 col-sm-offest-2 col-md-6 col-md-offset-3">
      <div class = "results" id = "resultsID">


    </div>

Answer 1

有两个问题。

首先，您的 button is implicitly submitting the form（默认类型为 submit）。

因此您需要将 type="button" 添加到 button 元素中。

其次，返回的 html 不能发送给 jQuery 构造函数，因为根据 jQuery 构造函数，它在语法上是不正确的。有一条记录的错误消息：“未捕获错误：语法错误，无法识别的表达式”。结果应发送到 .html() 函数。

$("<div>").html(wikiJSON.query.search[0].snippet).appendTo("#resultsID")

Working pen

appendTo 显示奇怪的行为

appendTo shows strange behaviour

javascript

jquery

wikipedia-api