Блог

Итак, у меня есть вложенные DIVS, и простая версия может быть показана следующим образом:

  $('#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, родительский диалог также отображается за дочерним диалогом.

Есть ли способ обойти это?

Это происходит потому, что ваше дочернее событие щелчка переходит к родительскому. Используйте e.stopPropogation() для дочернего div. Это предотвратит распространение вашего события click на родительский элемент.

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

Вы можете легко справиться с такими случаями, указав цель в атрибуте, как показано ниже.

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

Попробуйте это, прежде чем показывать модальный:

  $( '.modal' ).remove();
$( '.child' ).modal('show');
  

Удалите модальный перед использованием show . Надеюсь, это исправит вашу проблему