我有搜索输入，当用户输入邮政编码时，它会打开模式并显示交货地址。
模式打开时，信息显示正常，但是当用户在搜索输入中输入邮政编码（现在位于模式中）时，结果不会刷新。
输入字段是实时搜索，只是用户与之交互的第一个搜索的副本。
下面是我的HTML
第一个搜索栏
<div class="col-12 click-collect--container px-0">
<form>
<label for="postcode" class="d-inline-block w-100">Find your nearest pick up point</label>
<div>
<input class="form-control float-left" id="search" name="search" placeholder="Search by postcode" type="text">
<input class="btnpostcode btn btn-primary" data-target="#exampleModalLive" data-toggle="modal" id="Btn_Search" name="BtnPostCode" value="Search >">
</div>
</form>
</div>
这是带有搜索输入的模式的HTML
<div class="modal" id="exampleModalLive" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Click and Collect</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<div id="count"></div>
<div class="col-12 click-collect--container px-0">
<form>
<label for="postcode" class="d-inline-block w-100">Find your nearest pick up point</label>
<div>
<input class="form-control float-left" id="search" name="search" placeholder="Search by postcode" type="text">
<input class="btnpostcode btn btn-primary" id="Btn_Search" name="BtnPostCode" value="Search >">
</div>
</form>
</div>
<ul class="list-group mt-3" id="result"></ul>
</div>
<div class="col-6">
<div class="d-inline-block w-100">
<div id="googleMap" style="width:100%;height:300px;"></div>
<ul class="list-group" id="lat-long"></ul>
</div>
<Div class="row">
<div class="col-6">
<ul class="list-group" id="address-container"></ul>
<ul class="list-group" id="opening-times"></ul>
</div>
<div class="col-6">
<div id="del-lists-wrapper"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是我的jQuery
$('#search').blur(function() {
$('#result').html('');
$('#lat-long').html('');
$('#opening-times').html('');
$('#del-lists-wrapper').html('');
var searchField = $('#search').val();
var expression = new RegExp(searchField, "i");
$.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {
//console.log('json')
$.each(data, function(key, value) {
if (value.address.postcode.search(expression) != -1) {
//console.log(value)
//COURIER ADDRESS DETAILS
$('#result').append('<li data-contentid='+ key +' class="list-group-item courier"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="address"> ' + value.address.name + ',' + value.address.line1 + ',' + value.address.town + ',' + value.address.county + ',' + value.address.postcode + '</div></li>');
//LAT AND LONG
var mapProp= {
center:new google.maps.LatLng(value.location.latitude,value.location.longitude),
zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
//OPENING TIMES
$('#opening-times').append('<li id=open-times-'+ key +' class="list-group-item op-times"><div class="c-name font-weight-bold"> Opening Times </div><div class="">Mon ' + value.opening_times.Mon + ' </div><div class="">Tues ' + value.opening_times.Tues + ' </div><div class="">Wed ' + value.opening_times.Wed + ' </div><div class="">Thurs ' + value.opening_times.Thurs + ' </div><div class="">Fri ' + value.opening_times.Fri + ' </div><div class="">Sat ' + value.opening_times.Sat + ' </div><div class="">Sun ' + value.opening_times.Sun + ' </div></li>');
// ARRAY DELIVERY OPTIONS
var ul = $('<ul id=del-add-'+ key +' class="del-options"></ul>');
$.each(value.delivery_options, function(key, val) {
ul.append('<li del-id=' + key + ' class="list-group-item"><div class="c-name font-weight-bold"> ' + val.name + ' </div><div> ' + val.description + ' </div><div class="c-price font-weight-bold"> ' + val.price + ' </div><div class="btn btn-primary btn-block mt-3"><a>Select ></a></div></li>');
});
ul.appendTo('#del-lists-wrapper');
//COURIER ADDRESS FOR OTHER CONTAINER
$('#address-container').append('<li id=cour-add-'+ key +' class="list-group-item alt-address"><div class="c-name font-weight-bold"> ' + value.name + ' </div><div class="d-inline-block w-100"> ' + value.address.name + ' </div><div class="d-inline-block w-100"> ' + value.address.line1 + ' </div><div class="d-inline-block w-100"> ' + value.address.town + '</div><div class="d-inline-block w-100"> ' + value.address.county + ' </div><div class="d-inline-block w-100"> ' + value.address.postcode + '</div></li>');
}
});
});
});
谢谢您的帮助。
答案 0 :(得分：2)
这是因为您的侦听器正在寻找名为search的ID的第一个实例。您需要将第二个名称命名为“ modal-search”，并将其包含在“ search”事件侦听器中。
$('#serach', '#modal-search')
可以或者进行class =“ search”，然后通过$('.search')而非$('#search')收听