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();来阻止页面刷新/重新加载。

＆＃13;

＆＃13;

$('#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 + '" >');
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;