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

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 => {&nbsp; console.log(e.target.value);});function populateSelect() {&nbsp; $.ajax({&nbsp; &nbsp; type: "GET",&nbsp; &nbsp; url: URLSELECT + 'tipologia',&nbsp; &nbsp; success: function(response) {&nbsp; &nbsp; &nbsp; let options = response._embedded.map(o => `<option value="${o.name}">${o.name}</option>`);&nbsp; &nbsp; &nbsp; $select.html(options);&nbsp; &nbsp; },&nbsp; &nbsp; error: function(err) {&nbsp; &nbsp; &nbsp; console.log(err);&nbsp; &nbsp; }&nbsp; });}