动态创建的选项无法正常工作

Question

我正在处理一个表单，其中选择是动态创建的。所以我这样做了：function populateSelect() {  $.ajax({    type: "GET",    url: URLSELECT + 'tipologia',    success: function (response) {      let key;      for (var k in response._embedded) {        key=k;        break      }      createSelect(response._embedded[key], "tipologia")      let options = $('select[name=tipologia]').find('option');      options.each((el)=>{        $(this).on('click', function(){          console.log($(this));        })      })    },    error: function(err){      console.log(err);    }  });}function createSelect(options, select) { options.forEach((el)=>{  let text = el.name;  let option = document.createElement('option');      option.setAttribute('value', text);      option.textContent = text      option.addEventListener('click', function(e){        console.log('test);              })   document.querySelector(`[name=${select}]`).appendChild(option); })}现在，如果我检查 HTML，选项将以正确的方式创建，具有正确的值和正确的文本，但 addEventListener 不起作用。

Answer 1

首先，该click事件在元素上没有得到很好的支持option。更好的做法是监听changeparent 上的事件select，然后读取 chosen 的值option。

此外，您的代码比需要的复杂得多。您可以使用和option从 AJAX 请求的响应更轻松地构建元素列表。尝试这个：map()append()

let $select = $('select[name=tipologia]').on('change', e => {

  console.log(e.target.value);

});

function populateSelect() {

  $.ajax({

    type: "GET",

    url: URLSELECT + 'tipologia',

    success: function(response) {

      let options = response._embedded.map(o => `<option value="${o.name}">${o.name}</option>`);

      $select.html(options);

    },

    error: function(err) {

      console.log(err);

    }

  });

}