时间戳

首页 > 解决方案 > 在 jQuery 点击事件上重用 ajax 调用结果

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

问题描述

任务是从 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)

这是一个小提琴：https ://jsfiddle.net/aikast/4rgcvd7z/

发生的情况是，每次调用 append 函数时，它都会创建新的点击事件（我知道它应该是这样工作的），并且代码停止正常工作（它看不到当前的ajax 调用结果，所以每个值都是空的）。

停止事件传播没有帮助。

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

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

标签： javascriptjqueryajax

解决方案

你应该试试下面的东西。现在只有一次点击事件被触发。

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

所以每次你的函数调用时，首先它会取消绑定以前的事件。

您也可以查看现场演示。

https://jsfiddle.net/zhna7ksu/

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

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

推荐阅读