按钮需点击两次才返回数据的问题解决咨询

问题核心 #

你遇到的两次点击才显示数据的问题，根源是重复绑定了点击事件：第一次点击触发外层的$(document).on('click', '.dad-pagamento', ...)，在所有AJAX请求完成后，又给按钮绑定了新的clickHandler事件，但这个新绑定的事件要等到第二次点击才会执行。

修改后的完整代码 #

HTML代码（无需改动）

<button type="button" tabindex="0" class="dropdown-item btn-show dad-pagamento" >Teste</button>

修改后的JS代码

$(document).on('click', '.dad-pagamento', function() {

  $.getJSON('valreceber.php', function(data) {
    $.getJSON('valreceberext.php', function(data1) {
      $.getJSON('valreceberext1.php', function(data2) {
        $.getJSON('valreceberext2.php', function(data3) {
          $.getJSON('valreceberext3.php', function(data4) {
            $.getJSON('valreceberext4.php', function(data5) {

              var results = data.concat(data1).concat(data2).concat(data3).concat(data4).concat(data5);

              var arr = [];
              Object.keys(results).forEach(c => {
                id_utt1 = results[c].N_utente;
                arr.push(id_utt1);
              })

              $.getJSON('valreceber1.php?arr' + '&arr=' + arr, function(data6) {
                // 移除重复的事件绑定，直接执行数据处理和渲染逻辑
                processAndRenderData(data6, results);

                function processAndRenderData(data6, results) {
                  data6.sort(function(a, b) {
                    return a.N_utente - b.N_utente;
                  });

                  data6.forEach(function(person) {
                    var id = person.N_utente;
                    var filteredData = results.filter(d => d.N_utente === id);
                    addHtml(person.NomeResp, person.moradaResp, person.CodigoPostal, person.Localidade, filteredData);
                  });
                }

                function addHtml(NomeResp, moradaResp, CodigoPostal, Localidade, filteredData) {
                  // 补充实际需要生成的HTML内容（原代码为空，需根据业务调整）
                  var html = `<div class="user-item">
                                <h4>${NomeResp}</h4>
                                <p>Morada: ${moradaResp}</p>
                                <p>Código Postal: ${CodigoPostal}</p>
                                <p>Localidade: ${Localidade}</p>
                                <!-- 可在此添加filteredData相关内容 -->
                              </div>`;

                  document.querySelector(".pagmfalta").innerHTML += html;
                  $('#minhaDiv1').show();
                }
              });
            });
          });
        });
      });
    });
  });
});

关键修改说明 #

1. 移除重复事件绑定：删掉document.querySelector(".dad-pagamento").addEventListener("click", clickHandler);这行代码，避免二次绑定导致的触发延迟。
2. 直接执行渲染逻辑：将原clickHandler改名为processAndRenderData，并在获取到data6后直接调用，把数据排序、过滤、渲染的逻辑在第一次点击的AJAX回调里一次性完成。
3. 补全HTML生成逻辑：原addHtml函数里的HTML为空，补充了基础结构，你可以根据实际业务需求调整内容。

可选优化：解决回调地狱（提升代码可读性） #

原代码多层嵌套AJAX会导致回调地狱，建议改用Promise.all并行请求接口，简化代码结构：

$(document).on('click', '.dad-pagamento', async function() {
  // 并行请求所有基础数据接口
  const [data, data1, data2, data3, data4, data5] = await Promise.all([
    $.getJSON('valreceber.php'),
    $.getJSON('valreceberext.php'),
    $.getJSON('valreceberext1.php'),
    $.getJSON('valreceberext2.php'),
    $.getJSON('valreceberext3.php'),
    $.getJSON('valreceberext4.php')
  ]);

  const results = [...data, ...data1, ...data2, ...data3, ...data4, ...data5];
  const arr = results.map(item => item.N_utente);

  // 请求最终数据并渲染
  const data6 = await $.getJSON(`valreceber1.php?arr=${arr.join(',')}`);
  
  data6.sort((a, b) => a.N_utente - b.N_utente);
  data6.forEach(person => {
    const filteredData = results.filter(d => d.N_utente === person.N_utente);
    addHtml(person.NomeResp, person.moradaResp, person.CodigoPostal, person.Localidade, filteredData);
  });

  function addHtml(NomeResp, moradaResp, CodigoPostal, Localidade, filteredData) {
    const html = `<div class="user-item">
                    <h4>${NomeResp}</h4>
                    <p>Morada: ${moradaResp}</p>
                    <p>Código Postal: ${CodigoPostal}</p>
                    <p>Localidade: ${Localidade}</p>
                  </div>`;
    document.querySelector(".pagmfalta").innerHTML += html;
    $('#minhaDiv1').show();
  }
});

内容的提问来源于stack exchange，提问作者Bruno