jQuery/Bootstrap:子DIV打开父模态 [英] jQuery / Bootstrap: Child DIV opens up Parent Modal

问题描述

所以我有嵌套的DIV，可以这样显示一个简单的版本:

So I have nested DIVs and a simple version can be shown like this:

 $('#parent').click(function() {
  $('.parent').modal('show');
});
    
$('#child').click(function() {
  $('.parent').modal('hide'); // Added to try and hide
  $('.child').modal('show');
  $('.parent').modal('hide'); // Added to try and hide
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
  </div>
 </div>
  

问题是，当我单击子div时，父对话框也会显示在子对话框的后面.

The thing is when I click on the child div, the parent dialog also shows up behind the child dialog.

有什么办法解决这个问题?

Any way to get around this?

推荐答案

之所以发生这种情况，是因为您的孩子点击事件正在冒泡给父母.将e.stopPropogation()用作子div.这样可以防止您的点击事件传播给父对象.

It is happending because your child click event is bubbling up to the parent. Use e.stopPropogation() for the child div. This will prevent your click event from propogating to the parent.

$('#parent').click(function() {
  $('.parent').modal('show');
});
    
$('#child').click(function(e) {
  e.stopPropogation();
  $('.parent').modal('hide'); // Added to try and hide
  $('.child').modal('show');
  $('.parent').modal('hide'); // Added to try and hide
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
  </div>
 </div>

这篇关于jQuery/Bootstrap:子DIV打开父模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！