Bootstrap 4 Modal与jQuery点击事件冲突问题咨询

嘿，我来帮你理清楚这个问题～其实Bootstrap Modal并没有禁用元素的原生Click事件，你的点击事件没生效主要是事件绑定时机或者事件冒泡相关的问题，下面给你拆解原因和解决办法：

核心原因分析 #

你给父元素<span>加了data-toggle="modal"和data-target="#confirmModal"，Bootstrap内部是通过事件委托监听这个父元素的点击事件来触发Modal的。当你点击图片时，事件会正常冒泡到父元素触发Modal，但这本身不会阻止图片自身的点击事件——除非你的绑定方式有问题。

解决办法 #

1. 检查事件绑定时机 #

如果你的jQuery代码是在DOM还没加载完成时执行的，那$("#myImg")根本找不到对应的元素，绑定自然无效。你需要把代码放到$(document).ready()回调里，确保DOM加载完成后再绑定：

$(document).ready(function() {
  $("#myImg").click(function () { 
    alert("Clicked"); 
  });
});

2. 针对动态生成元素用事件委托 #

如果你的图片是通过AJAX或者其他方式动态添加到页面的，直接用$("#myImg").click()绑定会失效，这时候需要用事件委托绑定到父级（或者document）：

$(document).on('click', '#myImg', function() {
  alert("Clicked");
});

3. 同时触发自定义逻辑和Modal的两种方案 #

如果你希望点击图片时既弹出Modal，又执行自定义代码，可以选下面两种方式：

• 方案一：手动触发Modal，去掉父元素的Bootstrap属性
  修改HTML，移除父span的data-toggle和data-target：

  <span class="col-lg-3"> 
    <img id="myImg" class="img-responsive" src="/Content/uploads/done.png" style="cursor:pointer;" alt="@item.OpportunityID"> 
  </span>
  

  然后在图片的点击事件里手动调用Modal：

  $(document).ready(function() {
    $("#myImg").click(function () { 
      alert("Clicked");
      $('#confirmModal').modal('show'); // 手动触发Modal弹窗
    });
  });
  

• 方案二：监听Modal的显示事件
  如果你不想改动现有HTML结构，可以直接监听Modal的show.bs.modal事件，在Modal即将显示时执行你的自定义逻辑：

  $(document).ready(function() {
    $('#confirmModal').on('show.bs.modal', function (e) {
      alert("Modal即将弹出，这里可以执行你的自定义代码！");
      // 你的其他逻辑写在这里
    });
  });
  

总结 #

Bootstrap并没有禁用原生点击事件，你的问题大概率是事件绑定时机不对，或者没有针对动态元素使用事件委托。按照上面的方法调整后，应该就能正常触发自定义点击事件啦～

内容的提问来源于stack exchange，提问作者Haytham