부트 스트랩 모달 데이터 -ID 문제

Question

모달이있는 datatables 행에 대한 메모를 저장합니다. 데이터 테이블에 대한 YADCF 플러그인으로 테이블을 필터링 할 때까지 제대로 작동합니다. ID가 비어 있거나 마지막 개방 모드입니다. 무슨 일 이니? 내 코드 :

//PHP to echo the button to open modal for saving notes 
echo '<td><button class="btn btn-primary" id="note-'.$project->case_id.'" data-id="'.$project->case_id.'" data-toggle="modal" data-target="#noteModal">Notities</button></td>'; 

//The Modal 
<!-- /.modal --> 
<div class="modal fade bs-modal-lg" id="noteModal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> 
      <h4 class="modal-title">Notities</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="form-group"> 
       <label for="caseId">Case ID</label> 
       <input type="text" class="form-control" name="caseId" id="caseId" value="" /> 
      </div> 
      <div class="form-group"> 
       <label for="caseId">Notities</label> 
       <textarea id="note" class="form-control" name="note"></textarea> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-primary" type="submit" id="submit-note">Opslaan</button> 
      <button type="button" class="btn dark btn-outline" data-dismiss="modal">Sluiten</button> 
     </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

//The script to open and save modals with id. Sometimes this id is empty or the last open which is opened 
<script> 
    $(document).ready(function() { 

     $('button[id^="note"]').click(function() { 
      var id = $(this).data("id"); 
      $(".modal-body #note").val(''); 
      $(".modal-body #caseId").val(id); 

      $.ajax({ 
      url: "notitie?id="+id, 
      dataType: 'json', 
      async: false, 
      success: function(data) { 
       $(".modal-body #note").val(data); 
      } 
      }); 
     }); 

     $("#submit-note").click(function() { 
      var id = $('.modal-body #caseId').val(); 
      var note = $('.modal-body #note').val(); 

      $.ajax({ 
       type: 'POST', 
       url: 'notitie/opslaan', 
       data: '{"id":"'+id+'","note":"'+note+'"}', // or JSON.stringify ({name: 'jonas'}), 
       success: function(data) { 
        location.reload(); 

       }, 
       contentType: "application/json", 
       dataType: 'json' 
      }); 
     }); 

    }); 
</script> 

Answer 1

이 속임수를 썼는지

$('#table-projects').on('click', 'button[id^="note"]', function(){