Can't find a way to install an event handler on a button included in the tooltip

Hi, I tried to google it but did not find a way to do that.

Here is my code:

        refreshTooltip: function () {
            console.log("[treeview  ] refreshTooltip()");
            var self = this;

            console.log("[treeview  ] - destroying previous tooltips...");
            $(".tooltipstered").tooltipster('destroy');

            console.log("[treeview  ] - reinstalling tooltips...");
            $('.ttip').tooltipster({
                theme                       : 'tooltipster-light',
                animation               : 'grow', // 'fade', 'grow', 'swing', 'slide', 'fall'
                updateAnimation : 'rotate', //'fade', 'rotate', 'scale', null
                contentAsHTML       : true,
                interactive         : true,
                delay                       : 500,
                side                        : ['right','top', 'bottom','left'],

                functionPosition: function(instance, helper, position) {
                    if (position.side == 'right') {
                        position.coord.left += 1; // 5 extra pixels on the right to let some spec to move to lower nodes in the tree
                    }
                    return position;
            },

                functionBefore: function(instance, helper) { // 'instance' is basically the tooltip
                    //console.log("[treeview  ] tooltip functionBefore()");
                    var $origin = $(helper.origin);

                    // we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
                    if ($origin.data('loaded') !== true) { // FIXME handle the reset of this when calling destroy and re-enable it
                        var tooltipSrcId = $origin.closest("tr.item_row").attr("id"); // i.e. "cm_123"
                        var tooltipSrcName = $origin.text();

                        //console.log("[treeview  ] tooltip loading " + tooltipSrcId.toUpperCase() + "...");
                        instance.content("loading " + tooltipSrcId.toUpperCase() + "...");

                        if (tooltipSrcId.startsWith("cm_")) { // getCompanyTooltipContent
                            self.backend.getTooltip(instance, helper, "getCompanySummary", "companyId", tooltipSrcId.replace(/cm_/gi, ""), self.main); // AJAX CALL BASED ON THE ORIGIN ID
                        } // if... else ...
                    } // if ($origin.data('loaded') !== true)
                }, // functionBefore

                functionReady(origin, tooltip) {
                    console.log("- - - - functionReady !");
                },

                functionAfter(origin, tooltip) {
                    console.log("- - - - functionAfter !");
                }

            }); // $('.ttip').tooltipster({})
        }, // refreshTooltip: function

and getTooltip():

        getTooltip: function (instance, helper, command, idName, idValue, mainTree) {
            console.log("[backend   ] getTooltip(" + command + ")");
            var self = this;
            $.ajax({type:"GET", url:this.serverURL+"/api?command="+command+"&"+idName+"="+idValue,
                success: function(data){
                    // download embedded images in the content
                    var dataWithEmbeddedImages = self.downloadEmbeddedImagesInHtml(data);

                    // optional "More" button
                    var redirectButton = "";
                    if (!mainTree) {
                        redirectButton = "<div style=\"margin-top: 10px;\"><div class=\"summary_single\"><a id=\"more-button\" class=\"btn btn-success\">More</a></div></div>";
                    }

                    instance.content(dataWithEmbeddedImages + redirectButton);

                    var $origin = $(helper.origin);
                    $origin.data('loaded', true); // to remember that the data has already been loaded

// CAN'T ACCESS THE MORE BUTTON HERE
                    $(instance.tooltip).closest('#more-button').on("click", function() {
                        console.log("- - - - -Clicked!");
                    });

                },

                error: function(data){
                    console.log("[backend   ] ERROR while retrieving the tooltip!");
                }
            });
        },

Could you guide me doing this ?

I tried using functionReady(origin, tooltip) but for any reason it seems the content of the tooltip is not yet ready in there, so I'm tryin to dot his directly in getTooltip() as you can see.

Thanks,

calebjacob / tooltipster

Can't find a way to install an event handler on a button included in the tooltip #754