javascript - 如何使用 jQuery 查找具有特定名称的下一个输入并获取其值？

Question

我需要重写一些代码，因为通过 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。

Answer 1

问题是因为 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();