在点击下拉列表项不起作用-jQuery

问题描述

我有这个仅部分起作用的简单JS和Jquery代码段。自动完成下拉列表可以工作，但是应该在单击自动完成项目时执行的jquery位没有反应（即，在函数内部有未执行的警报）。我不是JS方面的专家，而且我还是自学成才的，因此下面的代码可能有点混乱。如果有人愿意“整理一下”以便它干净并能正常工作，我将不胜感激。

脚本：

$(document).ready(function(){

var startyear_select = document.getElementById("startyear")
var length_select = document.getElementById("length") 
var addressform_select = document.getElementById("addressform");



length_select.onchange = function formnumber(){
startyear = startyear_select.value;
length = length_select.value;
startyear = Number(startyear);
var optionHTML = '';
var optionHTML1 = '';
var optionHTML2 = '';
var optionHTMLtotal = '<h4> In the Boxes below,provide your all acccommodation addresses: </h4>  <br><table> <tr> <th>Postcode</th> <th> Address </th> <th> Move in year </th> </tr>'
for (i = 0; i<=length-1; i++){
   optionHTML = '<tr> <td> <div class="autocomplete postcode"> <input required id=postcode'+i+' type="text" placeholder="Postcode">  </div>  </td>';
   optionHTML1=' <td> <select class="form-control address" style="width: 400px" id=address'+i +' > </select> </td> ';
   optionHTML2 =' <td> <input id=year'+i +' name="year" required type="text" value='+Number(startyear+i)+' readonly> </div> <td>';

   optionHTMLtotal +=optionHTML+optionHTML1+optionHTML2
   
}
addressform_select.innerHTML =optionHTMLtotal+' <input name="length" type = "hidden" id="length" required type="text" value='+length+'> <input type="submit" value="Submit!">';
for (i = 0; i<=length-1; i++){
autocomplete(document.getElementById('postcode'+i+''),postcodes.postcodes);
} 


$('.autocomplete-items').children().on('click',function(){ alert("hello")
  var postcode = $('.postcode');
  var address = $('.address');
  post = postcode.value;
  fetch('/auth/address/' + post).then(function(response) {
      response.json().then(function(data) {
          var optionHTML = '';
          for (var ads of data.addresses) {
              optionHTML += '<option value="' + ads.address + '">' + ads.address + '</option>';
              }
          address.innerHTML = optionHTML;
      })

    })
  })


}

})

此脚本使用的是JS内置的自动完成功能，可在此处https://www.w3schools.com/howto/howto_js_autocomplete.asp

使用

HTML：

 <head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/autocomplete.css') }}">

 </head> 

<body>


    <form method="POST" >
        <div class="row">
        <div class="col-md-4">
          
            {{ wtf.quick_form(lenform) }} 
        </div> </div>
        </form>



<div>
<form  id=addressform autocomplete="off" method="POST"></div>
    
<script src= "{{ url_for('static',filename='js/autocomplete.js') }}"> </script>
<script src= "{{ url_for('static',filename='js/autocomplete2.js') }}"> </script>
<script>
  var postcodes = JSON.parse('{{ postcodes | tojson | safe}}');
</script>
</body>

自动完成邮政编码输入的结构如下：

<div class='autocomplete postcode'> 
<input required id='postcode0'type='text'>
<div class='autocomplete-items'>
<div> 1 </div> <div> 2 </div> 
</div> </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript jquery jquery-selectors