なぜajaxリクエストが繰り返されますか？

Question

jsonplaceholder.typicode.com JSONからToDoタイトルを取得しようとしています。私は3つのボタンを持っていて、それぞれのボットンはidを持っています。そのidはjson todoに関連しています。 bottonをクリックすると、そのjson todoのタイトルが表示されます。

ボタン1 = jsonplaceholder.typicode.com/todos/1
ボタン2 = jsonplaceholder.typicode.com/todos/2
など。

$('button').click(function (event) { 
 
    var id = event.target.id; 
 
    console.log(id); 
 
    $.ajax({ 
 
     url: "https://jsonplaceholder.typicode.com/todos/" + id, 
 
     type: "GET" 
 
    }).done(function (data) { 
 
     $('#result').append('<div class="todo"></div>'); 
 
     $.each(data, function (key, value) { 
 
      if (key == "title") { 
 
       $('.todo').append('<p>' + key + ': ' + value + '</p>'); 
 
      } 
 
     }); 
 
    }).fail(function (event) { 
 
     alert(event.status); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="1">A</button> 
 
<button id="2">B</button> 
 
<button id="3">C</button> 
 
<div id="result"> 
 
</div>

問題は、ボタンをクリックするたびにタイトルが繰り返されることです。なぜこれが起こるのですか？

Answer 1

なぜですか？あなたは別の<div class="todo"></div>]ボタンがクリックされるたびに追加して、

あなたは新しい<div class="todo">を隔離し、それだけで

var $todo = '<div class="todo"></div>' 
$('#result').append($todo); 
$.each(data, function(key, value) { 
    if (key == "title") { 
    $todo.append('<p>' + key + ': ' + value + '</p>'); 
    } 
}); 

---

または空に新しいコンテンツを追加することができますが存在している一人一人にコンテンツを追加しているので$('#result')あなたが変更することで、最初のセットを表示したくない場合は、新しいコンテンツを追加する前に：

$('#result').append('<div class="todo"></div>'); 

への

$('#result').append('<div class="todo"></div>');` 

その後、あなたはtodoクラスにすべての要素に結果を追加します：

$('.todo').append('<p>' + key + ': ' + value + '</p>'); 

あなたが最初に新しいtodoのdivを作成し、各AJAX行わコールバックで

$('#result').html('<div class="todo"></div>'); 

Answer 2

私は最初の行を削除し、秒を変更することをお勧めします$('#result')