jquery - 在按钮单击时使用 ajax 调用数据在第二次单击时不能在同一个按钮上工作

Question

我有一个按钮，它打开一个 Bootstrap 模式弹出窗口，并使用数据表填充了数据行。这工作正常。单击该按钮时，它会运行 Ajax 请求以获取数据并将其显示在模式窗口中。我可以在控制台工作中看到 Ajax 请求。

模式弹出窗口有一个“关闭”按钮，可以关闭模​​式，即关闭它。如果我然后再次单击该按钮以打开相同的模式，则在控制台窗口中看不到 Ajax 请求，而控制台窗口又不会重新加载数据。每次单击按钮以获取对数据的任何更改时，我都需要触发 Ajax 请求。

谁能看到为什么第二个按钮单击没有调用 dataTables Ajax 脚本。我的逻辑告诉我，每次单击按钮时都应该运行 Ajax 调用。如果我刷新页面，单击按钮会按预期工作。

按钮：

<a  class="cursoritem" data-toggle="modal" id="room_override_data_modal"><span class="glyphicon glyphicon-plus"></span>Room override</a>

模态窗口：

<div id="open_current_room_display_overrides_data_modal" class="modal fade" data-keyboard="false" data-backdrop="false" style="z-index:111">
  <div class="modal-wayfinder-signage" modal-ku style=" max-height:85%;  margin-top: 35px; margin-bottom:50px;" modal-lg>
    <div class="modal-content-search"> 
      <!-- END -->
      <div class="modal-header-current-signage">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <div class="modal-title-current-signage" id="HideTitle" style="cursor:move">Current room display override schedule.</div>
      </div>

      <div class="modal-body-room-override">

    <table name="timeline" border="0" cellpadding="0" cellspacing="0" class="table table-striped" id="roomoverrideTable" style="width:100%; min-width:800px" data-role="datatable"   data-info="false">
      <thead>
        <tr class="CenterHeaderSignageData">
          <th><div class="LeftPadding">Room</div></th>
          <th><div class="ImagePadding">Image</div></th>
          <th>Promotion</th>
          <th>From</th>
          <th>To</th>
          <th><div class="RightPadding"></div></th>
        </tr>
      </thead>
      <tbody class="CurrentSignage-rows">
      </tbody>
    </table>

      </div>
      <div class="footer_search_buttons">
          <div class="room-overide-message">Room overrides take priority if the room has a booking</div>
      <div id="foot-button-margin-current-room-display-override-schedule">
    <button id="NewRoomOverrideform" type="button" class="btn btn-success btn-xs">New override</button>
    <button id="NewRoomOverridecancelform" type="button" class="btn btn-secondary-edit btn-xs" data-dismiss="modal">Close</button>
      </div>
      </div>
    </div>
  </div>
</div>

dataTables 和 Ajax 调用

$(document).on("click", "#room_override_data_modal", function() {
var hotelid ='<?php echo $_SESSION['_amember_user']['hotelid'];?>';
  $('#open_current_room_display_overrides_data_modal').modal('show');
  $(".modal-body-room-override").css("padding",'2px');
   $(".modal-body-room-override").css("margin",'2px');
  var imagepath = '../../../../conf/conf_images/roomoverride/' + hotelid + '/';
  $('#roomoverrideTable').DataTable({
   "ordering": false,
        retrieve: true,
        paging: false,
    searching: false,
        bInfo : false,
        responsive: true,
        fixedHeader: true,
   ajax: {
      url: 'get_room_override.php', 
      dataSrc: ''
      
   },
   "columnDefs": [
    { className:"model-left-margin", "targets": [ 0 ] }
  ],
   language: {
      "emptyTable": "There are no promotional signage schedules set"
    },

    columns: [
      { data: 'RoomName',"sWidth": "15%" },
      { data: "PromoImage", "sWidth": "15%",  render : function (data, type, full, meta) 
                     { return '<img src="' + imagepath + '' +data+'" class="WayfinderSignageImageModal"/>'; }
      },
      { data: 'ClientName', "sWidth": "30%" },
      { data: 'PromotionFromDate', "sWidth": "20%" },
      { data: 'PromotionToDate',  "sWidth": "15%"},

      { data: 'RecordID',  render : function (data, type, full, meta) {
            var recordid = full.RecordID;
                    console.log("RECORDID", recordid);
                     return '<input type="button" name="edit" value="Edit" data-id=' + recordid + ' class="btn btn-conf-view btn-xs edit_room_override">' }
      
     },
    ]

  });
});

标签： jquerydatatablesbootstrap-modal