Question

我遇到了最棘手的问题而我无法找到另一个捕获它的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>

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

Answer 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.

删除后返回的表行 - jquery

1 个答案: