JQuery不會追加

Question

我是JQuery的新手。我有以下表格，它從用戶處獲取一個地址並顯示一條問候消息;還附加一個位置的谷歌api照片到身體。但是當我輸入時沒有任何反應。我究竟做錯了什麼？謝謝你的幫助。

部分HTML：

<form id="form-container" class="form-container"> 
    <label for="street">Street: </label><input type="text" id="street" value=""> 
    <label for="city">City: </label><input type="text" id="city" value=""> 
    <button id="submit-btn">Submit</button> 
</form> 
<hr> 

<h2 id="greeting" class="greeting">Where do you want to live?</h2> 

和jQuery代碼：

function loadData() { 

var $body = $('body'); 
var $wikiElem = $('#wikipedia-links'); 
var $nytHeaderElem = $('#nytimes-header'); 
var $nytElem = $('#nytimes-articles'); 
var $greeting = $('#greeting'); 

// clear out old data before new request 
$wikiElem.text(""); 
$nytElem.text(""); 

// load streetview 
var streetStr = $("#street").val(); 
var cityStr = $("#city").val(); 
var address = streetStr + ", " + cityStr; 

$greeting.text('So, you want to live at ' + address + '?'); 

var streetViewUrl = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + ''; 

$body.append('<img class="bgimg" src="' + streetViewUrl + '" >'); 
}; 

$('#form-container').submit(loadData); 

Answer 1

您應該使用event.preventDefault();以阻止該網頁刷新/點擊提交按鈕時重新加載。

$('#submit-btn').on("click", function (event) { 
 
event.preventDefault(); 
 
var $body = $('body'); 
 
var $wikiElem = $('#wikipedia-links'); 
 
var $nytHeaderElem = $('#nytimes-header'); 
 
var $nytElem = $('#nytimes-articles'); 
 
var $greeting = $('#greeting'); 
 

 
// clear out old data before new request 
 
$wikiElem.text(""); 
 
$nytElem.text(""); 
 

 
// load streetview 
 
var streetStr = $("#street").val(); 
 
var cityStr = $("#city").val(); 
 
var address = streetStr + ", " + cityStr; 
 

 
$greeting.text('So, you want to live at ' + address + '?'); 
 

 
var streetViewUrl = 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location='+ address + ''; 
 

 
$('#img').append('<img class="bgimg" src="' + streetViewUrl + '" >'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form-container" class="form-container"> 
 
    <label for="street">Street: </label><input type="text" id="street" value=""> 
 
    <label for="city">City: </label><input type="text" id="city" value=""> 
 
    <button id="submit-btn">Submit</button> 
 
</form> 
 
<hr> 
 

 
<h2 id="greeting" class="greeting">Where do you want to live?</h2> 
 
<div id="img"></div>