我需要重写一些代码,因为通过 ajax 加载的新 DOM 无法使用我设置的变量。
使用我的代码,当填写邮政编码和门牌号时,我会自动填充地点和街道名称。
这就是代码:
$("body").on("input","input[name='postcode']",function(e){
e.preventDefault();
var value = $(this).val();
var housenumber = $(this).find("input[name='huisnummer']").val();
console.log(value);
console.log(housenumber);
if(housenumber.length >= 1) {
if (value.length == 6) {
url = 'includes/postcodecheck.php';
var $postcode = $("input[name='postcode']").val();
var $huisnummer = $("input[name='huisnummer']").val();
var posting = $.post( url, { postcode: $postcode, huisnummer: $huisnummer} );
posting.done(function( data ) {
var obj = JSON.parse(data);
var status = obj[0].status;
var straat = obj[0].straat;
var woonplaats = obj[0].woonplaats;
if (status == 'error') {
}else if(status == 'success'){
$('input[name="woonplaats"]').val(woonplaats);
$('input[name="straat"]').val(straat);
}
// var content = $( $.parseHTML(data) );
// $( "#postcoderesult" ).empty().append( content );
});
}else {
}
} else {
alert('Vul eerst je huisnummer in voor dat je verder kan.');
$("input[name='postcode']").val('');
}
});
问题出在这部分:
var housenumber = $(this).find("input[name='huisnummer']").val();
这始终是空的,因此我永远不会开始检查门牌号是否不为空。这是为什么?我想在 input[name='postcode']
之后获取 input[name='huisnummer']
的值。
这是我的 html 标记:
<form class="editadres">
<div class="col-md-12 col-sm-12 pb-10">
<label for="">Naam (bijvoorbeeld: thuis, werk etc) *</label>
<input type="text" name="naam" value="Test123">
</div>
<div class="col-md-12 col-sm-12 pb-10">
<label for="">Huisnummer</label>
<input type="text" name="huisnummer" value="10" maxlength="9">
</div>
<div class="col-md-12 col-sm-12 pb-10">
<label for="">Tussenvoegsel</label>
<input type="text" name="tussenvoegsel" value="">
</div>
<div class="col-md-12 col-sm-12 pb-10">
<label for="">Postcode</label>
<input type="text" name="postcode" value="3202GP" maxlength="6">
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-md-12 pb-10">
<label for="">Straatnaam</label>
<input type="text" name="straat" class="readonly1" value="Winston Churchilllaan" readonly="" required="">
</div>
<div class="col-md-12 pb-10">
<label for="">Woonplaats</label>
<input type="text" name="woonplaats" class="readonly1" value="Spijkenisse" readonly="" required="">
</div>
</div>
</div>
</form>
以上 HTML 是通过 ajax 调用加载到模式中的。我也尝试将整个函数放在ajax回调中,但这也有同样的问题。它总是启动警报
,这意味着我的代码认为housenumber
的长度不大于0。
最佳答案
问题是因为 find()
在当前元素内搜索以检索您提供的选择器。由于 input
元素不能嵌套,这显然是行不通的。
相反,您可以使用 closest()
遍历 DOM 以查找当前元素和目标元素最近的公共(public)父元素,然后使用 find()
。试试这个:
var housenumber = $(this).closest('.editadres').find("input[name='huisnummer']").val();
话虽这么说,如果只有一个 "input[name='huisnummer']"
元素(正如您稍后在选择 straat
时在代码中所暗示的那样)直接使用 woonplaats
,那么 DOM 遍历就没有意义了,你也可以直接选择 housenumber:
var housenumber = $("input[name='huisnummer']").val();
关于javascript - 如何使用 jQuery 查找具有特定名称的下一个输入并获取其值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59837276/