删除后返回的表行 - jquery

Posted 2023-02-26

【中文标题】删除后返回的表行 - jquery

【英文标题】：Table rows coming back after removal - jquery

【发布时间】：2016-01-15 22:43:53

【问题描述】：

我遇到了一个最奇怪的问题，我找不到另一个可以捕获它的 SO 线程。

我根据组的成员呈现包含许多行的表格。当我切换组的成员时，我使用.remove() 删除表中的行并调用 ajax 和关联的回调函数来重新呈现行而不重新加载页面。这些行被删除得很好，但它们回来时正确附加了新行。我已经尝试了 Jquery 和普通 javascript 的几乎所有变体，包括.deleteRow()，但似乎没有什么能永远摆脱这些。这一切都会产生相同的行为。相关匿名代码如下：

脚本：

  //get information and create dropdown
  ApiRequest.call("GET", barCall, null, "", basicAuth, dropdownBuilder);
  function dropdownBuilder(responseStatus, response) 
    if (responseStatus == 200) 

      var parseInfo = JSON.parse(response)

      $("#dropdown").append('<a class="dropdown-toggle" data-toggle="dropdown" id="list-title" aria-haspopup="true" aria-expanded="false">All<span class="caret"></span></a><ul class="dropdown-menu" id="name-dropdown"></ul>')

      $("#name-dropdown").append("<li><a href='#' id='dropdownBase'>All</a></li>")

      $("#dropdownBase").on('click', function()
        $("#list-title").html('All<span class="caret"></span>');
        $("#tableBody").children().remove();
        ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
      );

      for (i = 0; i < parseInfo.length; i++) 
        liElement = "<li><a href='#' id='dropdown" + parseInfo[i].id + "'>"parseInfo[i].name"</a></li>"
        $("#name-dropdown").append(liElement)

        $("#dropdown" + parseInfo[i].id).on('click', theprovider: parseInfo[i], function(el) 
          $("#list-title").html(el.data.theperson.name + '<span class="caret"></span>');
          $("#tableBody").children().remove();
          ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
        );
        
     else 
        var text = "error code: "
        notification.text(text.concat(responseStatus).concat(" ").concat(response));
        console.log("not good")
        console.log(responseStatus)
    
  

  // get all the records for a specific provider
  ApiRequest.call("GET", fooCall, null, "", basicAuth, tableFunction);
  function tableFunction(responseStatus, response) 

    if (responseStatus == 200) 
      var parsedJsonObject = JSON.parse(response);

      if(parsedJsonObject.length>0)
        for (i = 0; i < parsedJsonObject.length; i++) 

          var htmlStructure = "<tr>...foo...</tr>" 

          $('#tableBody').append(htmlStructure);
        
      
    
  

HTML：

<div class="container">
<div class="row interact">
  <div class="col-sm-12">
    <div class="btn-group" id="dropdown"></div>
  </div>
</div>
</div>
<div class="container-fluid">
  <div class="row">
    <table id="table" class="table table-hover">
      <thead>
      <tr class="filters">
        <th class="filter"><h3>Head1</h3></th>
        <th class="filter"><h3>Head2</h3></th>
        <th class="filter"><h3>Head3</h3></th>
        <th class="filter"><h3>Head4</h3></th>
        <th class="filter"><h3>Head5</h3></th>
      </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>
</div>

有人有什么想法吗？当我删除元素时，它们应该永远消失了！

【问题讨论】：

我对 Json 和 ajax 不太了解，但我相信问题出在这一行 for (i = 0; i < parsedJsonObject.length; i++)

如果它们在您再次执行 ajax 查询之前被删除，那么您将在 ajax 查询中再次调用这些行。您是否记录了查询以查看是否正确返回了所有内容？

在代码中放置一些断点并遍历它。没有什么明显的突出，也没有任何存储可以包含在新数据中

似乎是因为与tableSorter的交互。 TableSorter 将行保留在其缓存中。如果我更新缓存它工作正常。我没有包含该代码，因为它感觉无关紧要。对不起！

具体来说，这解决了我的问题：***.com/q/1903788/5335953

【参考方案1】：

2 可能导致该问题的问题：

问题 1：

在 dorpdownBuilder 中，您调用逻辑 if (responseStatus == 200)。您忘记检查 ajax 请求的 readySate，因为 (responseStatus == 200) 在 ajax 请求的生存期内被多次触发。

if( responseStatus === 200 && readyState === 4)//logic get called only ones RIGHT

if( responseStatus === 200 ) //logic get called multipletimes WRONG

问题 2：

在 dropdownBuilder 完成他的工作后，您的 #dropdown div 中有 2 个 onclick 侦听器。另一个问题是由事件冒泡引起的。

在最深的元素上触发事件后，它会按嵌套顺序在父元素上触发..

停止冒泡 [...] event.stopPropagation()

Read more about readySate. Read more about event bubbling.