无法针对 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());
});

谁能告诉我如何做到这一点？

这里是fiddle（只有静态内容（只有星期五 1 有事件类，所以点击时应该触发））

更新

如果有人对 fullcalendar 有同样的问题，请查看我的回答 here

Answer 1

您的代码不起作用的原因是因为您的具有fc-bgevent 类的div 没有高度，因此无法单击它。如果您设置它的高度（例如，将其设置为 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 的 z-index 设置为 -1 并且您的代码可以正常工作：

Working Jsfiddle

Answer 2

看看小提琴https://jsfiddle.net/divekarvinit/drzx0zxg/

我用过$(document).on()。