javascript - 使用 ajax 加载动态数据时不显示模态窗口

Question

嗨，如果有人可以帮助我解决这个问题，我将不胜感激，因为我从 2 天开始就在尝试。我有一个页面，其中包含表格中的合同列表和一个按钮，用于根据按钮的 id 打开带有动态数据的模态窗口，但是当我单击该按钮时，它不显示模态窗口。我的合同列表 HTML 代码是

<table id="MyTable" class="table table-md table-bordered table-hover table-lightfont">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Customer Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>ABCD</td>
      <td>
        <button type="button" name="view" id="1" class="btn btn-light btn-sm shadow-none view_data">
        More Details
        </button>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>XYZ</td>
      <td>
        <button type="button" name="view" id="2" class="btn btn-light btn-sm shadow-none view_data">
        More Details
        </button>
      </td>
    </tr>
  </tbody>
</table>

这是我的模态窗口代码

<div id="contractModal" class="modal show fade" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title text-info"><?php echo $module ?></h6>
      </div>
      <div class="modal-body pt-0">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">
          <i class="fa fa-close"></i>
          <?php echo GetBilingualLabels($_SESSION['$language'],"BUTTON","BACK"); ?>
        </button>
      </div>
    </div>
  </div>
</div>

这是我用动态数据打开模式窗口的 JavaScript 代码

<script>
  $(document).ready(function(){
    $('.view_data').click(function(){
      var ccpid=$(this).attr("id");
      //alert(ccpid);
      $.ajax({
        url:"showdata.php",
        method:"POST",
        data:{},
        success:function(data){
          $('.modal-body').html(data);
          $('#contractModal').modal("show");
        }
      });
    });
  });
</script>

这是我的 showdata.php 代码

<?php
  $output='';
  $output .="<label>Contract code</label>";
  echo $output;
?>

标签： javascriptphphtmlajax