Question 276145 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Click Handler in HTML inside FC event

I am using EventContent RenderHook to insert HTML in an event. And I am trying to attach a jquery click handler to it. Despite that the handler fires – the handler related with eventClick also fires, I do not want that since the mouse pointer points to the element inserted with eventContent.
It seems that bubbling takes place – i am not sure though.

Here is the code I tried

 eventContent: function(arg) {
      var startDt = new Date(arg.event.startStr);
      var endDt = new Date(arg.event.endStr);
      var start = startDt.getHours() + ':' + startDt.getMinutes();
      var end = endDt.getHours() + ':' + endDt.getMinutes();
      
      if(arg.event.extendedProps.stack == true){
        return { html: '<p>'+ start +':' + end +'</p><p>' +arg.event.title +'</p>' +'<span  data-      stackid ="'+ arg.event.id +'" class="stckNum" >+'+
 arg.event.extendedProps.stacknumber +'</span>'
      }
      }
    },

Here is the Jquery Handler:

 $(document).on('click','.stckNum',function(e){
     
     var stackedID = $(this).data('stackid');
     console.log(stackedID);

    })

stackedID is pritend in the console but also eventClick callback. fires as stated.
Here is the how the HTML looks like:

<div class="fc-event-main">
<p>9:30:11:0</p><p>Papageorgiou</p>
<span data-stackid="55" class="stckNum">+1</span></div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found another solution after all. The eventclick callback has as argument an event object...this object contains jsEvent low - level information. By looking through the DOM properties I can see exactly to which element the user clicked and based on that within eventClick callback I can act accordingly.


  2. 0

    To prevent the eventClick callback from firing when you click on the .stckNum element, you can stop the event propagation using event.stopPropagation() in your jQuery click handler.

    $(document).on('click', '.stckNum', function(e) {
    e.stopPropagation(); 
    
    var stackedID = $(this).data('stackid');
    console.log(stackedID);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search