Bootstrap 只有在使用jQuery.on时才会捕获引导模式事件

ctrmrzij 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(141)

我正在从一个应用程序中删除Bootstrap 3和jQuery。在这样做的过程中，我遇到了一个事件在jQuery中工作得非常好的情况，然而，当我尝试使用vanilla JavaScript做同样的事情时，事件根本没有被触发。
下面是一个工作片段，查看jQuery函数，它执行alert('here')，运行后可以看到它正在工作：

$('#myModal').on('hidden.bs.modal', function (e) {
  alert('here');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<p>
 Click the "x" icon in the modal and it should trigger an alert from the jQuery function below...
</p>
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

但是，当我尝试将相同的jQuery转换为JavaScript时，它不会触发alert：
一个二个一个一个
我很好奇 * 为什么 * 第二个例子不起作用，而第一个例子起作用--如果我自己用hidden.bs.modal抛出一个CustomEvent，它就可以正常工作，但仍然没有回答 * 为什么 * 这个例子不起作用的问题。

twitter-bootstrap

来源：https://stackoverflow.com/questions/74814263/bootstrap-modal-event-is-only-captured-when-jquery-on-is-used

1条答案

按热度按时间

kwvwclae1#

有了bootstrap 5和一个正确的启动和关闭X按钮属性集，这似乎在这里工作正常。
我还添加了一个手动触发器时，这运行-可以在一个按钮点击或什么，但我只是强迫它运行。

const myModal = document.getElementById('myModal');
myModal.addEventListener('hidden.bs.modal', function(e) { 
  console.log('hidden triggered');
});
myModal.addEventListener('hide.bs.modal', function(e) { 
  console.log("hide triggered")
});

//Manual trigger of fun guys
const event = new Event('hidden.bs.modal');
// Listen for the event.
//elem.addEventListener('hidden.bs.modal', (e) => { /* … */ }, false);
// Dispatch the event.
myModal.dispatchEvent(event);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

<p>
 Click the "x" icon in the modal and it should trigger an alert from the jQuery function below...
</p>
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal">
  Launch modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 只有在使用jQuery.on时才会捕获引导模式事件

1条答案

相关问题

热门标签

最新问答