代码之家 › 专栏 › 技术社区 › Reiion

Javascript onClick不会激发getJSON

html jquery javascript

Reiion · 技术社区 · 9 年前

我想问一下,为什么我的Javascript函数不执行附带的jQuery函数$。getJSON()?

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

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不会加载。我会在功能之外。

3 回复 | 直到 9 年前

Sycraw 9 年前

输入不是模板标记,因此必须关闭它,而不将其他标记放入其中:

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

表格 <input> ..... </input> 对html无效

为了解决这个问题,必须更改输入类型=“提交”,因为提交会导致在脚本中的函数结束之前重新加载页面。在这个答案的评论部分,我建议使用输入类型=“button”,这就成功了。其他解决方案,如用 <button type="button"> 标签足够好,可以被认为对这个问题有效,可能是一个 < 标记更符合问题需要,因为它是一个模板标记,所以可以在内部使用其他标记编写。

SilverSurfer 9 年前

您没有关闭输入标记,只需添加 > :

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

jek 9 年前

在这里,试着用这些替换你的标记。由于您使用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>

如果这对你的问题有帮助,请告诉我。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前