2017-12-24 5 views
0

2 개의 ajax 호출을 사용하여 입력 필드에서 데이터를 가져 와서 서버로 보내고 새 데이터베이스 레코드를 작성합니다. 저장 성공하면, 내 HTML 테이블에 새 html 테이블 행을 추가합니다.Jquery/Ajax - ajax 호출 후에 appendet 클래스로 작업하기

seccond ajax 호출은 특정 비용 지점에 속한 ID를 내 서버로 보내고이 레코드를 데이터베이스에서 삭제합니다.

두 가지 호출이 모두 작동합니다. 그러나 html 레코드를 만들고 페이지를 새로 고치지 않고 다시 삭제하려는 경우 작동하지 않습니다. 테이블 그게

function addNewRow(id, name, cost) { 
     $('#costTable tr:last').after('<tr data-id="'+id+'"><td><i class="material-icons">delete forever</i></td><td>' + name + '</td><td>' + cost + '</td></tr>>'); 
    } 

$(document).on('click', '#saveCost', function() { 
      var name = $("input[name='cost-name']").val(); 
      var cost = $("input[name='cost-price']").val(); 
      $.ajax({ 
       type: "post", 
       url: "{{ route('saveCost') }}", 
       data: {'name': name, 'cost': cost}, 
       success: function (data) { 
        swal({ 
         position: 'top-right', 
         type: 'success', 
         title: 'Kostenpunkt wurde gespeichert', 
         showConfirmButton: false, 
         timer: 1000 
        }); 
        $("input[name='cost-name']").val(""); 
        $("input[name='cost-price']").val(""); 
        addNewRow(data, name, cost); 
       }, 
       error: function (data) { 

       } 
      }); //end of ajax 
     }); 
     $(document).on('click', '.deleteCost', function() { 
      var $this = $(this); 
      var costID = $this.closest('tr').data('id'); 
      $.ajax({ 
       type: "post", 
       url: "{{ route('deleteCost') }}", 
       data: {'costID': costID}, 
       success: function (data) { 
        swal({ 
         position: 'top-right', 
         type: 'success', 
         title: 'Kostenpunkt wurde gelöscht', 
         showConfirmButton: false, 
         timer: 1000 
        }); 
        $this.closest('tr').remove(); 
       }, 
       error: function (data) { 

       } 
      }); //end of ajax 
     }); 

: 여기

내 코드입니다 나는 새 행을 생성 (페이지를 새로 고침없이) 다시 삭제를 한 후

<table class="table" id="costTable"> 
     <thead class="text-primary"> 
       <th>Action</th> 
       <th>Kostenpunkt</th> 
       <th>Kosten</th> 
     </thead> 
     <tbody> 
       @foreach($costs as $cost) 
        <tr data-id="{{ $cost->id }}"> 
          <td><i class="material-icons deleteCost">delete forever</i></td> 
          <td>{{ $cost->name }}</td> 
          <td class="text-primary">{{ $cost->cost }}</td> 
        </tr> 
       @endforeach 
     </tbody> 
    </table> 

, 그것은하지 않습니다 작업. 나는 "saveCost"ajax 호출에 데이터를 추가하고 추가 된 데이터가 실제 HTML DOM에 속하지 않기 때문이라고 생각합니다.

+0

첫 번째 통화에서 패스 백 ID가 있습니까? 당신 console.log (데이터) - 새 레코드의 ID를 보시겠습니까? – Victor

답변

2

addNewRow 함수에서이 요소에 deleteCost 클래스 이름을 추가하는 것을 잊어 버렸습니다 : <i class="material-icons">delete forever</i>. 이 클래스를 추가하면 삭제가 예상대로 작동합니다.

+0

아, 네 말이 맞아 !! 오, 난 너무 바보 같았 어. 못 봤어 : D 조 해줘서 고마워! 이제 완벽하게 작동합니다. 나는 당신의 대답을 정확하게 표시 할 것이다 :) – dwdawdawdaw

관련 문제