单击qtip jquery中的按钮时获取上下文

Posted 2021-05-03

这是一个普遍的问题。我有以下代码，其中#datatable（你猜对了）一个datatable

$("#datatable").on(
    "mouseenter",
    "td",
    function(event) {
        $(this).qtip(
            {
                content:"<button>Test</button>",
                position: {
                    my: 'bottom left',
                    at: 'center right',
                    adjust : {
                        method: "shift"
                    },
                    viewport: $('#datatable')
                },
                show: {
                    event: event.type,
                    ready: true
                },
                hide: {
                    fixed: true
                }
            },
            event
        );
    }
);

当我在$(this)工具提示中单击我的按钮时，我希望能够使用qTip2的所有细节（例如，获取列名称和/或单元格的值）。

jsFiddle here：当你点击Test按钮时，如何显示带有列名的警报？

答案

在渲染工具提示后，您可以为按钮指定一个类并触发单击。 不需要this关键字：

content:"<button class='my-btn'>Test</button>",
/*...*/
events: {
    render: function(e, api){
        $(".my-btn").on("click", function(){ 
            alert(api.target[0].innerText); 
        });
    }
}

---

Live Demo

另一答案

您可以在渲染后访问工具提示 - Documentation Link

    events: {
        render: function(event, api) {
                // console.log( api ); // to see the full list
            console.log( api.target[0].innerText ); // return the text of the cell
        }
    }

Fiddle