按钮，在连续单击事件中将重复数据附加到div

我有一个类为"数据段"；以及具有类"的按钮；获得第一数据"；。点击时，按钮应填充"；数据段"；div，其中包含从get请求中提取的数据。然而，我想要"；数据段"；在发出get请求之前首先删除div，以防止连续单击事件重复。

我写了下面的代码，我正在经历这个问题；

从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>

我不太清楚"获得第二数据"；正在拨打电话，但我假设它被放在同一个"；数据段"；作为/获得第一数据"；呼叫如果是这种情况，那么尝试放置$(".data section"(.empty((；在"/获得第二数据"；也可以这样打电话：

    $(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>')
            });
          });
        });
      });
    });

解决方案非常简单；用$(".get-first-data").unbind().on("click", function(e) 替换$(".get-first-data").on("click", function(e)

unbind方法确保单击事件只发送一次，方法是在每次单击时侦听事件之前，先从按钮中删除处理程序。因此，连续点击不会导致重复，因为$(".data-section").empty();能够有效地清除div

相关内容

最新更新

热门标签：