클릭 이벤트가 3 번 실행됩니다.

데이터베이스에있는 데이터를 GET으로 가져 와서 HTML에 표시 한 다음 확인란을 누르면 데이터베이스에 업데이트되는이 스크립트가 있는데 확인란을 누르면 PUT이 세 번이나 했어. 누구든지이 문제를 해결하는 방법을 알고 있습니까?클릭 이벤트가 3 번 실행됩니다.

어떤 도움을 환영합니다. 아래

코드 :

$.ajax({ 
    type: 'GET', 
    async: false, 
    url: 'https://app.myapp.com/reservations', 
    success:function(reservations){ 

     reservas.forEach (function (reservation) { 
      var HTML = []; 


      HTML.push('<tr class="reservations">'); 
      HTML.push('<td> <input type="checkbox" class="checkbox" data-id="' + reservation._id + '" data-nome="' + reservation.nome + '" data-email="' + reservation.email + '" /> </td>'); 
      HTML.push('<td>' + reservation._id + '</td>'); 
      HTML.push('<td>' + reservation.nome + '</td>'); 
      HTML.push('<td>' + reservation.email + '</td>'); 
      HTML.push('</tr>'); 
      $('tbody').append(HTML.join("")); 

      $(function(){ 
       $(document).on('click', '.checkbox', function(){ 
        console.log('salvo'); 
        var update = $(this); 


        $.ajax({ 

         type: 'PUT', 
         url: 'https://localhost/datas', 
         data: { 
          _id: update.attr('data-id'), 
          nome: update.attr('data-nome'), 
          email: update.attr('data-email'), 
         }, 
         sucess:function (success) { 
          alert('updated!!'); 
         }, 
         error:function(err) { 
          console.log(err); 
         } 
        }); 
       }); 
      }); 
     }) 
    }, 
    error:function(e){ 
     console.log(e); 
    } 
});

출처

2014-09-05 Anonymous

이벤트 처리기를 세 번 ('reservas'의 모든 항목마다 1 번) 할당했습니다. 그래서 그것은 3 번 방아쇠를 당겼습니다. – zerkms

@Nescau - 당신이 괜찮 았으면 좋겠다. 질문을 나중에 방문자들에게 유용 할 수 있도록 코드 샘플을 포함하도록 질문을 롤백했다. 코드가 없으면 질문과 답변이별로 의미가 없습니다. 당신이 남기고 싶지 않은 것을 편집 할 수는 있지만, 관련된 모든 부분을 떠나시기 바랍니다. –

문제는 각 반복마다 이벤트를 추가한다는 것입니다. 이벤트 리스너 기능을 각 .each에서 가져와야합니다. 문서 자체에 jQuery 함수를 사용하고 있기 때문에 Ajax 함수에서 해당 이벤트 리스너를 완전히 가져올 수 있으며 확인란에 대한 클릭을 듣게됩니다 (앞에서 언급했듯이 해당 이벤트를 문서가 아니라 체크 박스 자체에 연결되므로 이벤트를 바인딩하기 전에 존재하지 않아도됩니다.

출처

2014-09-05 02:51:42 Mindastic

당신은 다른 요청의 성공 이벤트 내에서 전 세계적으로 사용자의 클릭 핸들러를 할당한다. foreach 루프 안에 있습니다. 이 문제를 해결하려면 성공 핸들러 외부 및 루프 외부에서 클릭 핸들러 할당을 이동하십시오.

출처

2014-09-05 02:49:47 recursive

클릭 이벤트가 3 번 실행됩니다.

답변

관련 문제