时间戳

首页 > 解决方案 > 按钮在连续点击事件上将重复数据附加到 div

javascript - 按钮在连续点击事件上将重复数据附加到 div

问题描述

我有一个带有“data-section”类的 div 和一个带有“get-first-data”类的按钮。单击时，该按钮应使用从获取请求中提取的数据填充“数据部分”div。但是，我希望在发出 get 请求之前首先删除“数据部分”div 的内容，以防止连续点击事件发生重复。

我为此编写了以下代码，我遇到了这个问题；

  1. 从 get 请求中提取的数据被附加到“数据部分”div 中，而无需先删除现有内容。因此，我在多次单击按钮时出现重复 --- 知道为什么以及如何修复的建议吗？

    $(function() {
      $(".get-first-data").on("click", function(e) {
        e.preventDefault();
        $(".data-section").empty();
        
        $.get("/get-first-data", function(data, status) {
          $(".data-section").html(data)

          
          $.get("/get-second-data", function(data, status) {

            
            data.forEach(function(element) {

              var name = element.name;
              var age = element.age;

              $('table tr:last').after('<tr><td>' + name +
                '</td><td>' + age +
                '</td><td><a class="edit-data btn btn-dark">Edit</a></td></tr>')
            });
          });
        });
      });
    });

Below is the html code 


<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <button class="get-first-data" type="button" name="button"></button>

  <div class="data-section">

  </div>


</body>

</html>

标签： javascriptjquery

解决方案

我不太清楚“/get-second-data”调用返回的数据被放置在哪里，但我会假设它被放置在与/get-first-data“调用相同的“数据部分”中. 如果是这种情况，请尝试将 $(".data-section").empty(); 放在 "/get-second-data" 调用之后，如下所示：

    $(function() {
      $(".get-first-data").on("click", function(e) {
        e.preventDefault();
        $(".data-section").empty();
        
        $.get("/get-first-data", function(data, status) {
          $(".data-section").html(data)

          
          $.get("/get-second-data", function(data, status) {
            //Add this here
            $(".data-section").empty();
            data.forEach(function(element) {

              var name = element.name;
              var age = element.age;

              $('table tr:last').after('<tr><td>' + name +
                '</td><td>' + age +
                '</td><td><a class="edit-data btn btn-dark">Edit</a></td></tr>')
            });
          });
        });
      });
    });

推荐阅读