не могу нацелиться на определенный элемент в JQuery

Question

Вот html (только элемент td. Это генерируется fullcalendar)

<td class="fc-widget-content"> //can reach till here
   <div style="height: 37px;">
      <div class="fc-event-container" style="height: 0px;"></div>
      <div class="fc-bgevent-container">

         //want to target below element
         <div class="fc-bgevent" style="background-color: rgb(0, 0, 0); left: 0px; right: -101px;"></div> 

</div>
   </div>
</td>

При использовании делегирования события в jquery невозможно указать целевой элемент ниже.

   $("#pricing-calendar").on("click",".fc-bgevent",function(event){
        console.log($(this).data());
    });

Но если я сделаю это, это сработает (это самое близкое, к чему я могу добраться. fc-bgevent div)

$("#pricing-calendar").on("click",".fc-widget-content",function(event){
    console.log($(this).data());
});

Может кто-нибудь сказать мне, как этого добиться?

- это скрипка (только со статическим контентом (только у пятницы 1 есть класс событий, поэтому при нажатии должен срабатывать))

Обновление

Если у кого-то есть такая же проблема с fullcalendar, смотрите мой ответ здесь

Answer 1

Причина, по которой ваш код не работает, заключается в том, что ваш div с классом fc-bgevent не имеет высоты, поэтому по нему невозможно щелкнуть.если вы установите его высоту (например, установите его на 10 пикселей), вы сможете нажать на него:

$("#pricing").on("click",".fc-bgevent",function(event){
    alert("ljfkjgd");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="pricing">
<tr>
<td class="fc-widget-content"> //can reach till here
   <div style="height: 37px;">
      <div class="fc-event-container" style="height: 0px;"></div>
      <div class="fc-bgevent-container">

         //want to target below element
         <div class="fc-bgevent" style="background-color: rgb(0, 0, 0); left: 0px; right: -101px; height:10px"></div> 

</div>
   </div>
</td></tr>
</table>

---

---

РЕДАКТИРОВАТЬ:

в соответствии с jsfiddle ,Вторая причина того, что ваш код не работает, заключается в том, что существует класс div с классом fc-bg, который охватывает всю вашу основную таблицу.Одним из подходов к решению этой проблемы является использование атрибута z-index.здесь я устанавливаю fc-bg div's z-index на -1 и ваш код работает:

Рабочая Jsfiddle

Answer 2

Посмотрите на скрипку https://jsfiddle.net/divekarvinit/drzx0zxg/

Я использовал $(document).on().