在ajax调用之后更新动态生成的列表项（使用PHP生成）

Question

以下HTML代码是 echo ed ，在PHP中使用while循环，在从数据库中提取数据后添加列表项。

PHP：

echo '
<li>

  <div class="collapsible-header">

    <div class = "left">
      <div class = "issueStatusIcon" style = "background-color:'.$smallCircleColor.';">'.$smallMsg.'</div>
      <span class = "issueTitle" style = "font-family: robotoBold">'.$issueTitle.'</span>
    </div>

    <div class = "issueButtonsGroup">
      <form id = "archiveIssueForm'.$i.'" issue-name = "'.$issueTitle.'" action = "archiveIssue.php">
        <input type = "hidden" value = "'.$issueID.'" name = "issueID"/>
      </form>
      <a class = "right archiveIconButton" onclick = "ajaxIssueArchive('.$i.')" href = "#">
          <i class="material-icons black-text issueOptions archiveIcon">archive</i>
      </a>
      <a class = "right"><i class="material-icons black-text issueOptions">edit</i></a>
    </div>

  </div>                          

</li>                  
';

这是生成列表的预览图像：

注意光标在归档按钮上，该按钮用于归档列表项。该按钮的class为archiveIconButton （您可以在上面的代码中找到它）。单击该按钮时，将通过AJAX提交archiveIssueForm（每个表单的ID都附加一个唯一标识符变量$i。

以下是JQuery AJAX代码：

JQuery的：

<script>
  function ajaxIssueArchive($num){

    $.ajax({
      type: "post",
      url: "archiveIssue.php",
      data: $('#archiveIssueForm' + $num).serialize(),

      success: function(data){

        $fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name");
        $toastText = $fetchIssueName + " has been archived";
        Materialize.toast($toastText, 3000);
        $('#archiveIssueForm' + $num).html(data);
      }
    });

  }
</script>

归档任何列表项后，它将从数据库中删除。我想更新包含这些列表项的ul元素，以便在提交AJAX表单后不会显示被删除的列表项。

假设ul的id为issueListUL。

我目前得到的是li项目中显示的html页面的完整代码。我当然做错了什么，任何帮助都会受到赞赏！

归档列表项后：

Answer 1

我能够通过以下方式解决这个问题，问题中的JQuery脚本应该像这样改变：

<强> JQuery的：

products_controller

更新元素的html时，只需从ajax代码 中的<script> function ajaxIssueArchive($num){ $.ajax({ type: "post", url: "archiveIssue.php", data: $('#archiveIssueForm' + $num).serialize(), success: function(data){ //assigning the updated ul's html to a variable $afterIssueArchival = $(data).find("#issueListContainer").html(); //toast $fetchIssueName = $('#archiveIssueForm' + $num).attr("issue-name"); $toastText = $fetchIssueName + " has been archived"; Materialize.toast($toastText, 3000); //updation of ul's html, ID of the ul which contains all the list items is assumed to be 'listContainer' $("#issueListContainer").html($afterIssueArchival); } }); } </script> 属性中提取元素的更新html代码（如上面的代码） 并用它更新现有元素的HTML ！

希望这有助于解决与我同样问题的人！ ：d