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

这种情况正在发生，因为您的孩子点击事件正在冒泡到父母。使用e.stopPropogation()作为子div。这将阻止您的点击事件传播到父母。

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

Answer 2

您可以通过在下面的属性中提及目标来轻松处理此类案例。

$('#parent, #child').click(function() {
   var target = $(this).data('target');
   $('.'+target).modal('show');
   // write code to hide others if necessary
});

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

Answer 3

在显示模态之前尝试这个：

public class Interceptor1 extends AbstractPhaseInterceptor<Message> {

        public Interceptor1 () {
        super(Phase.UNMARSHAL);
        }
       @Override
      public void handleMessage(Message message) throws Fault {
          System.out.println("Interceptor1");
      }

}

public class Interceptor2 extends AbstractPhaseInterceptor<Message> {

        public Interceptor2 () {
        super(Phase.UNMARSHAL);
        }
         @Override
      public void handleMessage(Message message) throws Fault {
          System.out.println("Interceptor2");
      }

}

在使用show之前删除模态。希望这能解决您的问题

jQuery / Bootstrap：Child DIV打开Parent Modal

3 个答案: