Question

我正在使用Highchart Library。我通过格式化程序函数回调创建工具提示，并在工具提示中插入一个链接。

 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;
                }

现在我想在点击时调用ajax，但点击事件不会触发。

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

这是代码

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

Answer 1

在加载页面后，工具提示会动态附加到DOM，因此您需要使用委托的事件处理程序：

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

Answer 2

=> 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.

，因此您可以通过tooltip.style允许它们演示：http://jsfiddle.net/BlackLabel/4q9kga7e/1/

在高级图表工具提示中单击事件不会触发

2 个答案: