javascript - Click event not fire in highcharts tooltip - Stack Overflow

admin管理员组

文章数量:1431413

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-ment'>";
                        tooltipHTML += userImg;
                        tooltipHTML += "</div>";
                    }
                    tooltipHTML += "<div class='ment_filter'><a class='ments_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('ments_buble').on('click', function(e) {
//ajax call here
})

Here is Code

/

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-ment'>";
                        tooltipHTML += userImg;
                        tooltipHTML += "</div>";
                    }
                    tooltipHTML += "<div class='ment_filter'><a class='ments_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('.ments_buble').on('click', function(e) {
//ajax call here
})

Here is Code

http://jsfiddle/vxnq3578/3/

• javascript
• jquery
• highcharts

Share Improve this question Follow edited Jul 28, 2015 at 7:12 DMH asked Jul 28, 2015 at 6:52 DMHDMH 13022 silver badges1111 bronze badges 2

• could you create a jsfiddle,jsfiddle – dreamweiver Commented Jul 28, 2015 at 6:59
• Here is code jsfiddle/vxnq3578/3 – DMH Commented Jul 28, 2015 at 7:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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', '.ments_buble', function(e) {
    // ajax call here
})

=> 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/BlackLabel/4q9kga7e/1/

本文标签： javascriptClick event not fire in highcharts tooltipStack Overflow