个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:43:30 27 4
gpt4 key购买 nike

我昨天已经问过这个问题，但我认为我没有很好地解释我的问题。因此，如果单击返回按钮，我试图删除表格行，但我也想确保单击不是意外，因此应该有一个模式弹出窗口再次询问，如果单击"is"，则模式应该关闭并且该行应该被删除。我的问题是，如果您单击"is"，则应在模式中触发的第二个单击函数不会被触发。

这是我的代码片段:

$(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>

最佳答案

There were two issues with your code:

  1. 您调用的模式是 myModal，而它应该是 deleteModal。

  2. 您将 click 函数绑定(bind)在 #booked 的 click 内的类 ret 上> div。

以下是更改后的代码片段:

$(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>

关于javascript - 从引导模式的 yes 按钮调用 JS 警报，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52158832/

27 4 0
文章推荐： javascript - 如何从代码隐藏中调用 IFrame 中的 JS 函数
文章推荐： scala - Spark Dataframe - 在加入时实现 Oracle NVL 功能
文章推荐： erlang - 为什么 Elixir/Erlang 中的数据共享不适用于两个映射中的同一个元组
文章推荐： javascript - 如何在react js中尚未安装的组件中显示通知
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com