Question

所以我试图处理表的删除按钮。但是当我尝试它时，它并没有出现。我正在使用bootstrap，JQuery 3.1.1。这是代码。

<tr>
  <td>00002</td>
  <td>PFR</td>
  <td>Metro</td>
  <td><button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button></td>
  <td><button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button></td>
</tr>

  <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
      <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
    </div>

    <div class="modal-body">
      <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

    </div>
    <div class="modal-footer ">
      <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
      <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

和JQuery

$("button.btnDelete").click(function() {
    console.log("Delete!");
    $("#modalDelete").modal("show");
});

Answer 1

这是因为您的ModalDelete位于ModalEdit内。

看看here

<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div> <---- THIS WAS MISSING
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

Answer 2

您错过了一次关闭</div>编辑模式

FIDDLE

Answer 3

用这个替换你的HTML代码，它肯定会起作用。!!

<table id="mytable" class="table table-bordred table-striped">
  <thead>

    <th>ID</th>
    <th>Brand</th>
    <th>Desc</th>
    <th>Edit</th>
    <th>Delete</th>
  </thead>
  <tbody>
    <tr id="one">
      <td>00001</td>
      <td>BI</td>
      <td>Provincial</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>

    <tr>
      <td>00002</td>
      <td>PFR</td>
      <td>Metro</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>


    <tr>
      <td>00003</td>
      <td>PTDS</td>
      <td>Luxury</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>
  </tbody>
</table>



<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit Bus Detail</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <input class="form-control " type="text" id="txtBusName" name="txtBusName" placeholder="">
        </div>
        <div class="form-group">
          <input class="form-control " type="text" id="txtBusDesc" name="txtBusDesc" placeholder="">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
    </div>  
  <!-- /.modal-dialog -->
  <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
        </div>

        <div class="modal-body">
          <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

        </div>
        <div class="modal-footer ">
          <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>

莫代尔没有显示

3 个答案: