Javascript 引导模态数据id问题

我使用模式保存datatables行的注释。在我使用YADCF插件为datatables过滤表之前，它工作得很好。id为空或来自上一个openend模式。出什么事了？我的代码：

//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>

//PHP返回打开保存注释模式的按钮
回声“Notities”；
//模态
圣坛
病例ID
圣坛
奥普斯兰
斯鲁伊特
//打开和保存id为的modals的脚本。有时此id为空，或者是最后打开的id
$（文档）.ready（函数（）{
$（'button[id^=“note”]”）。单击（函数（）{
var id=$（this.data（“id”）；
$（“.modal body#note”）.val（“”）；
$（“.modal body#caseId”）.val（id）；
$.ajax({
url:“notitie？id=“+id，
数据类型：“json”，
async:false，
成功：功能（数据）{
$（“.modal body#note”）.val（数据）；
}
});
});
$（“#提交注释”）。单击（函数（）{
var id=$（'.modal body#caseId'）.val（）；
var note=$（'.modal body#note'）.val（）；
$.ajax({
键入：“POST”，
url:'notitie/opslan'，
数据：“{”id:“+id+”，“note:“+note+”}”，//或JSON.stringify（{name:'jonas'}），
成功：函数（数据）{
location.reload（）；
},
contentType:“应用程序/json”，
数据类型：“json”
}); 
});
});

这就成功了

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