javascript - jQuery/Bootstrap : Child DIV opens up Parent Modal

Question

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

 $('#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 时，父对话框也会出现在子对话框后面。

有什么办法可以解决这个问题？

Answer 1

它正在发生，因为您的子点击事件正在冒泡到父级。对子 div 使用 e.stopPropogation()。这将阻止您的点击事件传播到父级。

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