CODEWITHSUNDEEP
jqueryfullcalendar
Abhilash
Abhilash

Reputation: 2953

cant target certain element in jquery

Here is the html(just of the td element. This is generated by 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>

When using event delegation in jquery cant target below element. 

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

But if I do this it will work(this is the closest I can get to .fc-bgevent div)

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

Could someone tell me how to achieve this?

here is the fiddle (with just static content(Only Friday 1 have event class so when clicking that should fire))

Update

If someone have this same issue with fullcalendar please see my answer here

Upvotes: 0

Views: 352

Answers (2)

pouyan
pouyan

Reputation: 3449

The reason that your code doesn't work is that because your div with fc-bgevent class has no height so that it is not possible to click on it. if you set it's height (eg. set it to 10 pixel) then you would be able to click on it:

$("#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>

EDIT:

according to your jsfiddle, the second reason that your code is not working is that there is a div with class fc-bg which cover all of your main table. one approach to overcome this problem is using z-index attribute. here i set your fc-bg div's z-index to -1 and your code work:

Working Jsfiddle

Upvotes: 1

Vinit Divekar
Vinit Divekar

Reputation: 928

Have a look at the fiddle https://jsfiddle.net/divekarvinit/drzx0zxg/

I have used $(document).on().

Upvotes: 0

Related Questions