单击“高级图表”工具提示中的“不触发事件”

Question

我在使用高级图表库。我通过格式化函数回调创建一个工具提示，并在工具提示中插入一个链接。

 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，但单击event触发。

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/来允许它们