document.getElementsByClassName('query')；是否添加到附加的项目？
document.getElementsByClassName('query')；是否添加到附加的项目？
提问于 2018-06-30 03:25:08
我正在定义：
var inputs = document.getElementsByClassName('query');这适用于第一个元素，因为我们已经在页面上找到了它：
<input type="text" class="form-control query" placeholder="Enter location">但是，我通过append()添加了一个带有class query的input，因此当我这样做时：
$("body").on("click", ".addLocation", function(e){
e.stopPropagation();
$(".locationAdd").append('<input type="text" class="form-control query" placeholder="Enter location"><button type="button" class="addLocation btn btn-danger margin-top-20">Add location</button><hr>');
});在这种情况下，var inputs无法识别新的appended element
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-30 03:33:31
这就是我解决它的方法，基本上把所有东西都放在一个函数中，在开始时调用它，并在每次添加新元素时重新调用它。下面是我的页面上的完整代码，我添加的是一个新的输入字段来添加一个新的位置，因此我需要重新运行gmap代码：
setLocInput();
function setLocInput() {
var inputs = document.getElementsByClassName('query');
var autocompletes = [];
for (var i = 0; i < inputs.length; i++) {
var autocomplete = new google.maps.places.Autocomplete(inputs[i]);
autocomplete.inputId = inputs[i].id;
autocomplete.addListener('place_changed', fillIn);
autocompletes.push(autocomplete);
}
var locationsArray = [];
function fillIn() {
var place = this.getPlace();
var filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("country");
});
var country = filtered_array.length ? filtered_array[0].long_name: "";
locationsArray.push(country);
$("#usp-custom-8").attr("value", locationsArray);
$("#usp-custom-8").attr("data-location", locationsArray);
}
}
$("body").on("click", ".addLocation", function(e){
e.stopPropagation();
$(".locationAdd").append('<input type="text" class="form-control query" placeholder="Enter location"><button type="button" class="addLocation btn btn-danger margin-top-20">Add location</button><hr>');
setLocInput();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=getRelevantGoogleReviews"></script>
<input type="text" class="form-control query">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51108221
复制相关文章
相似问题