Ajax success回调函数中指定类被添加到所有搜索结果元素问题求解

AI 小北

2026-9-26

问题原因

你将外层容器<div id="tags-browser" class="grid-layout">写在了for循环内部，每遍历一条搜索结果就会完整插入一次「外层容器+单条结果」的结构，自然会生成多个重复的外层容器。
额外注意：HTML规范中id为全局唯一标识，你原有静态HTML里已经存在id="tags-browser"的元素，动态生成内容重复使用同一个id属于语法错误，会导致后续DOM操作出现异常。

修复方案

调整success回调的拼接逻辑，外层容器仅在循环外生成一次，循环内仅拼接单条搜索结果的内容，修改后的完整JS代码如下：

$('#id_search_tag').keyup(function(e) {
  $.ajax({
    url: "{% url 'searchTag' %}",
    data: {
      'w': $('#id_search_tag').val(),
    },
    method: 'get',
    dataType: 'json',
    success: function(response) {
      // 先清空原有搜索结果，不需要清空可删除此行
      $('#tags_list').empty();
      // 外层容器仅在循环外定义一次
      let resultHtml = `<div class="grid-layout">`;
      // 循环仅拼接单条搜索结果的结构
      for (result of response.results) {
        resultHtml += `
            <div class="mySearchedTags">
                   <div class="d-flex jc-space-between ai-center mb12">
                    <div class="flex--item">
                        <a href="/answers/tag/tag" class="post-tag" >${result.tagName}</a>
                    </div>
                </div>
            </div>
        `;
      }
      // 闭合外层容器标签
      resultHtml += `</div>`;
      // 一次性插入到页面中
      $('#tags_list').prepend(resultHtml);
    }
  })
})