왜 ajax 요청이 반복됩니까?

-2

jsonplaceholder.typicode.com JSON에서 todo 제목을 얻으려고합니다. 나는 세 개의 버튼을 가지고 있고 각각의 botton은 id를 가지고 있으며, id는 json todo와 관련이있다. botton을 클릭하면 해당 json todo의 제목이 표시됩니다.왜 ajax 요청이 반복됩니까?

버튼 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>

문제는 버튼을 클릭 할 때마다 제목이 반복된다는 것입니다. 왜 이런 일이 발생합니까?

출처

2017-11-20 Mustapha Aoussar

왜냐하면 클릭 할 때마다'$ ('# result'). append ('

');'를 다시 수행 한 다음 모든 todo div에 추가하기 때문입니다. –

왜? 다른 <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 사업부를 생성 할 각 아약스에

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

출처

2017-11-20 23:17:08 charlietfl

첫 줄을 지우고 두 번째 줄을 바꾸는 것이 좋습니다. $('#result')

출처

2017-11-20 23:20:29

왜 ajax 요청이 반복됩니까?

답변

관련 문제