javascript - 在 jQuery 单击事件上重用 ajax 调用结果

Question

任务是从 pokemon api 获取一些数据并将其附加到列表中。 Api 请求结果在上一页和下一页上有链接。

HTML:

<ul class="poke-list"></ul>
<div class="pagination">
   <button class="prev">Prev</button>
   <button class="next">Next</button>
</div>

这是一个调用 api 的函数(需要异步等待):

var getData = async function (url, pokemonName) {
   var response;

   if(!pokemonName) {
     response = await $.get(url);
   } else {
     response = await $.get(url + pokemonName);
   }
     return response;
}; 

附加内容和处理点击事件的函数:

var appendContent = function (data) {
  var list = $('.poke-list');
   list.empty();

   var res = data;
   var pokemons = res.results;
   pokemons.forEach(function (item) {
     list.append($(`<li>${item.name}</li>`));
  $('.prev').on('click', function (event) {
    res = data;
    var url2 = res.previous;
    if (url2 === undefined || url2 === null) {
      alert('Limit reached!');
    } else {
       getData(url2)
        .then(appendContent);
    }
   });

  $('.next').on('click', function (event) {
     res = data;
     var url = res.next;
     if (url === undefined || url ===null) {
        alert('Limit reached!');
     } else {
        getData(url)
          .then(appendContent)
  });

});

我在页面加载时调用它(是的，这是必要的):

$(function {
  getData()
    .then(appendcontent)

这是一个 fiddle :https://jsfiddle.net/aikast/4rgcvd7z/

每次调用 append 函数都会创建新的点击事件(我知道它应该如何工作)，并且代码停止正常工作(它看不到 current ajax 调用结果，所以每个值都是空的)。

停止事件传播没有帮助。

有没有办法以不同的方式组织它？我找不到让 click 事件处理程序在 appendContent 函数范围之外查看 ajax 调用结果的方法

问题被标记为重复，但按钮是静态的，它们不是动态添加的!

Answer 1

你应该试试下面的方法。现在只触发一次点击事件。

$(next).unbind( "click" );

所以每次当你的函数调用时，首先它会解除绑定(bind)以前的事件。

您也可以查看现场演示。

https://jsfiddle.net/zhna7ksu/

---

.unbind() 已弃用，您应该改用 .off() 方法。只需在调用 .on()

之前调用 .off()

$(next).off().on("click", .......);