Получить всех детей от e.target.id?

Question

У меня есть форма с разными разделами, и когда пользователь нажимает внутри определенного раздела, я хочу, чтобы индикатор выполнения отображался. Панель сначала скрыта с дисплеем: нет. Когда вы нажимаете anyhwere вне секции формы, индикатор прогресса должен скрыть. Я знаю, что здесь есть много вопросов, которые похожи, но я не могу заставить его работать для моего дела.

Проблема для меня состоит в том, чтобы нацелить не только идентификатор раздела формы, но и все его дочерние элементы, например входы и т. Д. Просто все, что находится внутри рамки раздела.

Вот мой код:

$(document).ready(function(){ 
 
    
 
    $(function() { 
 
     $(document).on('click', function(e) { 
 
      if (e.target.id == 'form-section') { 
 
       $('#progressbar').show(); 
 
      } else { 
 
       $('#progressbar').hide(); 
 
      } 
 
     }) 
 
    }); 
 
    
 
});

#progressbar { 
 
    width:50%; 
 
    background:green; 
 
    height:auto; 
 
    margin-bottom:10px; 
 
    display:none; 
 
    } 
 

 
#form-section { 
 
    background: #eee; 
 
    padding:10px; 
 
    }

<div id="progressbar">progressbar</div> 
 

 
...there are many elements between progressbar and section...<br><br> 
 

 
<div id="form-section"> 
 
    <h3>form section heading</h3> 
 
    <input type="checkbox" value="check1"/><label>check1</label> 
 
    <p><div class="inner-section"/> 
 
    <input type="radio" name="radio1"/><label>radio1</label> 
 
    <input type="checkbox" name="check2"/><label>check2</label> 
 
    
 
    </p><span>some content</span></div> 
 
    
 
    ...many nested elements inside the section 
 
</div>

Этот код имеет эффект, но мне кажется, что ProgressBar показывает только при нажатии непосредственно в форму сечения DIV, но не на любого из его детей. Может быть?

UPDATE: Теперь я сделал некоторые исследования снова и нашел этот ответ, который оказался хорошо работать на моем сайте: https://stackoverflow.com/a/7385673/5063672

Answer 1

Попробуйте привязки событий к элементу формы сечения, например, так:

$('#form-section').on('click', function(e) { 

Это должно быть привязано ко всем дочерним элементам. Я не могу придумать отличный способ закрыть его, щелкнув только за пределами этой области, код ниже может работать, но у меня нет возможности проверить его. И это уродливо.

$(document).on('click', function(e) { 
    if ($('#progressbar').is(":visible")){ 
     if !(e.target == $('#form-section') || e.target.parents('#form-section').length) 
      $('#progressbar').hide(); 
     } 
    } 
}