jQuery AJAX每个循环使用append和html

我希望从以下代码中检索json文件的数据，但问题是，如果我再次按下按钮，我会看到两次结果。 我将每个循环的第一个附加更改为html，但之后只加载了json的最后一个对象。

HTML：

 Load the orders 

JS：

 $("#add-order").click(function(){ $.getJSON('API/orders.json', function(data){ $.each(data, function(i, order){ $("#myorders").append("
 id: " + data[i].order.id + "
"); $("#myorders").append("
 Name: " + data[i].order.name + "
"); $("#myorders").append("
 Drink: " + data[i].order.drink + "
") }); }); }); 

数据示例：

 [{ "order":{"id": "1", "name": "Bill", "drink": "Capuccino"}}, { "order":{"id": "2", "name": "Sofia", "drink": "Late" }}] 

Answer 1

工作小提琴 。

.one（） ：将处理程序附加到元素的事件。 每个事件类型的每个元素最多执行一次处理程序。

你可以使用JQuery one()来触发一次点击：

 $("#add-order").one("click", function(){ $.getJSON('API/orders.json', function(data){ var my_orders = $("#myorders"); $.each(data, function(i, order){ my_orders.append("
 id: " + data[i].order.id + "
"); my_orders.append("
 Name: " + data[i].order.name + "
"); my_orders.append("
 Drink: " + data[i].order.drink + "
") }); }); }); 

注意：您附加了无效的HTML，

标签应该是ul的直接子项，因此您应该删除p 。

希望这可以帮助。

---

 var data = [{ "order":{"id": "1", "name": "Bill", "drink": "Capuccino"}}, { "order":{"id": "2", "name": "Sofia", "drink": "Late" }}] $("#add-order").one("click", function(){ var my_orders = $("#myorders"); $.each(data, function(i, order){ my_orders.append("
 id: " + data[i].order.id + "
"); my_orders.append("
 Name: " + data[i].order.name + "
"); my_orders.append("
 Drink: " + data[i].order.drink + "
") }); }); 

  
 Load the orders 

Answer 2

我刚刚发现该解决方案存在问题……如果更改/更新json文件的数据，则必须重新加载页面，因为one（）已经使用过一次。