JS警报从引导模式的yes按钮调用

问题描述 投票：0回答：3

我昨天已经问了这个问题，但我认为我没有解释我的问题。所以我试图删除一个表行，如果单击返回按钮但我也想确保点击不是意外，所以应该有一个模式弹出窗口再次询问，如果你单击是，那么模态应该关闭并且该行应该被删除。我的问题是，如果单击“是”，则应在模态中触发的第二次单击功能不会被触发。

这是我的代码片段：

$(document).ready(function() {

  var rowToDelete;

  $('#myModal').on('shown.bs.modal', function() {
    $('#myInput').trigger('focus');
  });

  $('#booked').click(function() {

    $('.ret').click(function() {
      var id = $(this).val();
      alert(id); //to test if this function gets triggered
      $('#myModal .delBtn').data('row-id', id); //set data id
      rowToDelete = $(this).closest('tr'); //store row in variable
    })
  });

  $('#booked').addClass('active'); //not necessary
  $('#book').removeClass('active');
  $('#admin').removeClass('active');

});

$(document).on("click", '#myModal .delBtn', function() {

  var rowId = $(this).data('row-id');
  alert("you removed" + rowId); //this alert never appears so this function is not getting triggered

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <div id="booked">
    <div class="row scrollableBooked">
      <div class="table-responsive">
        <table class='table table-bordered' id='bookedtable'>
          <thead>
            <tr>
              <th colspan='6' class='bookedHeader'>Booking for: example booking</th>
            </tr>
            <tr>
              <th>Type</th>
              <th>Serial Number</th>
              <th>Info</th>
              <th>Return</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 12)</td>
              <td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 25)</td>
              <td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 64)</td>
              <td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 34)</td>
              <td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

    <!--Delete Modal-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
          </div>

          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col">
                  <p><b> Are you sure you want to return this device? </b></p>
                  This is a test.
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary delBtn">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
javascript jquery bootstrap-modal
3个回答
1
投票

您的代码存在两个问题：

  1. 你调用的模态是myModal，而它应该是deleteModal。
  2. 你绑定click函数在ret div的click里面的#booked类。

以下是代码的已更改代码段：

$(document).ready(function() {

  var rowToDelete;

  $('#deleteModal').on('shown.bs.modal', function() {
    $('#myInput').trigger('focus');
  });

  $('.ret').click(function() {
    var id = $(this).val();
    alert(id); //to test if this function gets triggered
    $('#deleteModal .delBtn').data('row-id', id); //set data id
    rowToDelete = $(this).closest('tr'); //store row in variable
  });

  $('#booked').addClass('active'); //not necessary
  $('#book').removeClass('active');
  $('#admin').removeClass('active');

});

$(document).on("click", '#deleteModal .delBtn', function() {

  var rowId = $(this).data('row-id');
  alert("you removed" + rowId); //this alert never appears so this function is not getting triggered

});
<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <div id="booked">
    <div class="row scrollableBooked">
      <div class="table-responsive">
        <table class='table table-bordered' id='bookedtable'>
          <thead>
            <tr>
              <th colspan='6' class='bookedHeader'>Booking for: example booking</th>
            </tr>
            <tr>
              <th>Type</th>
              <th>Serial Number</th>
              <th>Info</th>
              <th>Return</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 12)</td>
              <td><button value='11' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 25)</td>
              <td><button value='25' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 64)</td>
              <td><button value='64' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
            <tr>
              <td>Device 1</td>
              <td>12345 </td>
              <td>lorem ipsum (id 34)</td>
              <td><button value='34' class='btn ret' data-toggle='modal' data-target='#deleteModal'>return</button></td>
            </tr>
          </tbody>
        </table>

      </div>
    </div>

    <!--Delete Modal-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
          </div>

          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col">
                  <p><b> Are you sure you want to return this device? </b></p>
                  This is a test.
                </div>
              </div>
            </div>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
1
投票

好的。你问的是#myModal。你想要选择的模态是#deleteModal。有两个地方你使用#myModal。将它们改为#deleteModal，你很高兴。

0
投票

click事件未触发，因为元素id'myModal'不存在。如果用deleteModal替换myModal，则会弹出警报。

$(document).on("click", '#deleteModal .delBtn', function () {...
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.