I am trying to call an input inside the DOM tree but I can not call it by the "active" class, however when I use task-wrapper the alert appears perfectly.
How do I solve it?
$(".active > .hideinfo > .wrapper-calendar > .since > .date > .dateBegin").on("click", function(){
alert("hola");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="task-wrapper ribbon ribbon-bookmark ribbon-danger active" data-taskid="1" style="background-size: 20% 40px;">
<span class="newball"><span class="magictimeslow newballpulse"></span></span>
<label class="titlecheck css-input css-checkbox css-checkbox-primary">
<input type="checkbox"><span></span>
</label>
<span class="name">prueba 1</span>
<span class="attach"></span>
<span class="eta">
Faltan 9 días
</span>
<div class="notice-wrapper">
<i class="si si-bell"></i>
36 día(s) antes
</div>
<div class="ribbon-box"><i class="fa fa-fw fa-star"></i></div>
<div class="tags">
<span class="tag">pruebas</span><span class="tag">tested</span><span class="tag">otra tag</span>
<div class="newitemfloating"><i class="creartag si si-plus"></i></div><input type="text" class="inputTag" name="inputTag" data-taskid="1" data-employee="6">
</div>
<div class="icons-wrapper">
<i class="si si-calendar magictimefast swashIn" data-type="calendar" data-anitime="100" style="display: inline-block;"></i>
<i class="si si-users magictimefast swashIn active" data-type="asigned" data-anitime="100" style="display: inline-block;"><div class="task-nots">1</div></i>
<i class="si si-layers magictimefast swashIn" data-type="subtasks" data-anitime="100" style="display: inline-block;"><div class="task-nots">3</div></i>
<i class="si si-paper-clip magictimefast swashIn" data-type="attachment" data-anitime="100" style="display: inline-block;"><div class="task-nots">3</div></i>
<i class="si si-bubble magictimefast swashIn" data-type="conversation" data-anitime="100" style="display: inline-block;"><div class="task-nots">1</div></i>
</div>
<div class="hideinfo">
<div class="wrapper-calendar" data-type="calendar" style="display: none;">
<span class="title">Fechas</span>
<div class="clear"></div>
<div class="date-wrapper since">
<span class="author">Desde: </span>
<div class="js-datetimepicker input-group date" data-side-by-side="true">
<span class="input-group-addon">
<i class="si si-calendar magictimefast swashIn" style="display: inline-block;"></i>
</span>
<input class="form-control dateBegin" type="text" id="" placeholder="2017-04-18 00:00:00 ">
</div>
</div>
<div class="date-wrapper until">
<span class="author">Hasta:</span>
<div class="js-datetimepicker input-group date" data-side-by-side="true">
<span class="input-group-addon">
<i class="si si-calendar magictimefast swashIn" style="display: inline-block;"></i>
</span>
<input class="form-control dateEnd" type="text" id="" placeholder="2017-04-19 00:00:00">
</div>
</div>
</div>
</div>
</div>