Question

所以我将AJAX调用放在了$("button").on("click") jQuery方法中。

因此，每当我单击button元素时，AJAX调用都会被激活并将值添加到胡子模板。

<button type="button">Click Me!</button>

<div id="template-container">
    <template id="my-template">
        <p>my name is:{{0}} and i am $("button") living in {{2}}</p>
    </template>
</div>

<script>
  $(function(){
    var templateContainer= $('#template-container');
    var myTemplate= $("#my-template").html();

    function addInfo(info){
      templateContainer.append(Mustache.render(myTemplate, info));
    };

    $( "button" ).on( "click", function() {

        // requesting data returns an array as such: [["name1", "34", "city1"],["name2", "23", "city2"]]
        $.ajax({
          type: 'GET',
          url: '/get_data',
          success: function(dataArray){
          console.log(dataArray)
            $.each(dataArray, function(i, info){
              addInfo(info);
            });
          },
          error: function(){
            alert("error loading infos");
          }
        });
    });
  });
</script>

现在，当我单击按钮my name is:name1 and i am 34 living in city1 my name is:name2 and i am 23 living in city2时，会发生以下情况：将数据成功添加到模板中，如下所示：

$("button")

当我再次单击按钮my name is:name1 and i am 34 living in city1 my name is:name2 and i am 23 living in city2 my name is:name1 and i am 34 living in city1 my name is:name2 and i am 23 living in city2时会发生问题，它在前一个下面添加了相同的数组，给出了以下输出：

$("button").on("click")

无论何时单击按钮，如何强制templateContainer方法删除先前的输出，以免复制发生？

更新

在尝试使用templateContainer.empty()并建议用户Kevin B附加到容器function addInfo(info){ templateContainer.empty(); templateContainer.append(Mustache.render(myTemplate, info)); };之前，我曾尝试删除这些信息。

my name is:name2 and i am 23 living in city2

但是，它现在仅显示数组的最后一项：

{{1}}

Answer 1

编辑：在每行之前添加此行：

templateContainer.children("p").remove();

或

  templateContainer.empty();

希望有帮助

AJAX调用产生附加记录而不是更新

1 个答案: