Question

我正试图在bootstrap模式中捕获“点击链接”，但由于某种原因它无法正常工作。

$(document).ready(function() {
  $('#menu-mobile a').click(function() {
    alert();
  });
});

<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">
  <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="exampleModalLabel">Menu</h4>
      </div>
      <div class="modal-body">

        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>

      </div>
      <div class="modal-footer">
        <button type="button" class="button xsmall" id="closeForm" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

我做错了什么？

Answer 1

您可以使用事件委派.on()，如：

$(function(){
    $('body').on('click', '#menu-mobile a', function() {
        alert();
    });
});

注意：您应该删除模式中的一个ID，因为您现在有两个id="menu" & id="menu-mobile"。

Answer 2

首先，你的模态元素有两次id属性：

<div class="modal fade" id="menu" tabindex="-1" role="dialog" id="menu-mobile">

假设您将其更改为

<div class="modal fade" tabindex="-1" role="dialog" id="menu-mobile">

然后在模式中访问甚至动态生成的内容，运行：

$('#menu-mobile').on('show.bs.modal', function (e) {
    alert();
});

Bootstrap Modal - 在模态内捕获链接点击？

2 个答案: