JQuery/Bootstrap: Ребенок ДИВ открывает родительскую Modal

Question

Так что я вложенное 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, родительский диалог также появляется за дочерним диалогом.

Любой способ обойти это?

Answer 1

Это происходит потому, что событие вашего дочернего щелчка пузырится до родителя. Используйте 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>

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

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

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

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