Javascript onClick不會觸發getJSON

Question

我想問為什么我的Javascript函數不執行封閉的jQuery函數$ .getJSON（）？

的HTML

<form action="" method="get">
    <input id="search" name="search" type="text" class="map-search form-control input-sm"/>
    <span class="input-group-btn">
         <input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" />
         <span class="glyphicon glyphicon-search"></span>
    </span>
</form>

Javacript

function nominatim_search() {
    var query = document.getElementById("search").value;
    $.getJSON('http://nominatim.openstreetmap.org/search/ph/'+query+'?format=json&limit=1&polygon_geojson=1&bounded=1&addressdetails=1', function (boundary) {
        var json = boundary[0].geojson;
        L.geoJSON(json).addTo(map);
  });
}

它將輸入該函數並警告查詢，但是不會加載JSON。 我會在功能之外。

Answer 1

您沒有關閉輸入標簽，只需添加> ：

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()"> 

Answer 2

輸入不是模板標簽，因此您必須關閉它而不將其他標簽放入其中：

<input class="map-search btn btn-default btn-sm" type="submit" onclick="nominatim_search()" /> 

<input> ..... </input>的格式不適用於html

更新

要解決此問題，必須更改輸入type =“ submit”，因為提交會導致腳本中函數結束之前的頁面重新加載。 在此答案的注釋部分中，我建議使用輸入type =“ button”來達到目的。 其他解決方案，例如用<button type="button">標記替換輸入，足以被認為對這個問題有效，也許<button type="button">標記更符合問題需求，因為它是一個模板化標簽，因此可以與其他標簽一起寫入。

Answer 3

在這里，只需嘗試用這些替換標記。 由於您使用Span修改按鈕的文本，因此請使用<button>而不是<input> 。

的HTML

<form action="" method="get">
    <input id="search" name="search" type="text" class="map-search form-control input-sm">
    <span class="input-group-btn">
    <button class="map-search btn btn-default btn-sm" type="button" onclick="nominatim_search()" />
         <span class="glyphicon glyphicon-search"></span>
    </button>
    </span>
</form>

讓我知道是否對您的問題有所幫助。