CODEWITHSUNDEEP
javascriptjqueryhighcharts
DMH
DMH

Reputation: 130

Click event not fire in highcharts tooltip

I am using Highchart Library. I create a tooltip via formatter function callback and insert a link inside tooltip. 

 config.tooltip.formatter = function(){
                    //console.log(this)
                    var tooltipHTML = "<b>✔ " + this.y + "% - " + this.key + "</b>";
                    var userImg = $('.user-picture').html();
                    if (userImg) {
                        tooltipHTML += "<div class='user-avatar-comment'>";
                        tooltipHTML += userImg;
                        tooltipHTML += "</div>";
                    }
                    tooltipHTML += "<div class='comment_filter'><a class='comments_buble' href='#' data-series='" + this.point.index + "'>Comment</a></div>";

                    return tooltipHTML;
                }

Now i want to call ajax on click but click event not firing.

jQuery('.comments_buble').on('click', function(e) {
//ajax call here
})

Here is Code

http://jsfiddle.net/vxnq3578/3/

Upvotes: 3

Views: 2321

Answers (2)

Sandip Solanki
Sandip Solanki

Reputation: 743

=> by default all events are reset on container
=> events are triggered from the one level not bubbled
=> tooltip is created "on the fly", so your jQuery has reference to object which does not exist.
=> mixing SVG / HTML elements does not allow you to use CSS pointer-events properly.

so you could allow them through tooltip.style Demo: http://jsfiddle.net/BlackLabel/4q9kga7e/1/

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

The tooltips are dynamically appended to the DOM after the page is loaded, so you need to use a delegated event handler:

$(document).on('click', '.comments_buble', function(e) {
    // ajax call here
})

Upvotes: 5

Related Questions