有没有办法在按钮或链接中调用引导程序功能？答案

【问题标题】：Is there a way to call a bootstraptour function within a button or link?有没有办法在按钮或链接中调用引导程序功能？
【发布时间】：2019-07-04 17:11:24
【问题描述】：

我想在用户点击一个按钮或链接时调用一个引导函数，该按钮或链接的 id 为“#tip-back-btn-1”

有没有一种方法可以直接在按钮或链接中调用 bootstraptour goto 函数？

我想用这样的东西：

<button class="tip-skip-button" id="tip-back-btn-1" onclick="tour.goTo(0);">Back</button>

我试着打电话

$("#tip-back-btn-1").click(function() {
    tour.goTo(0);
});

但这不起作用

我的引导程序代码如下供参考

    'use strict';

        $(function () {
            var steps = [];
            var leadIndex = 0;
            function gensteps(index, div, message, placement, template) {

                var id = $(div).attr('id');

                if (id === undefined) {
                    //$(body).attr('id', 'id_' + leadIndex + '_' + index);
                    id = $(div).attr('id');
                }
                var step = {
                    element: '#' + id,
                    content: message,
                    placement: placement,
                    template: template,
                    backdropElement: '#client-activated-update-client-info'
                };
                steps.push(step);
            }


            leadIndex++;
            $('#contain').each(function (index, div) {
                var template = '<div class="popover" role="tooltip"> <div class="arrow"></div> <div class="popover-content"></div> <div class="popover-navigation"> <div class="btn-group-custom"> <button class="tip-skip-button" id="tip-back-btn-1">Back</button> </div> <button class="tip-exit" data-role="end">Exit</button> </div> </div>';
                gensteps(index, div, '<h3 class="tool-tip-title">Address</h3>\n    <div class="tip-content">\n    <p>lorem ipsum dolet</p>\n </div>\n ', 'top',template);
            });


            $("#tip-back-btn-1").click(function() {
                tour.goTo(1);
            });



            var tour = new Tour({
                steps: steps
            });tour.init();
            tour.start(true);
            tour.goTo(0);


    });

我认为问题在于我的工具提示按钮代码定义得太早，并且 ID 为“按钮”的 DOM 元素还不存在。或者我的所有旅游代码都还没有加载。

【问题讨论】：

尝试用$("document").on("click", "#tip-back-btn-1", function()替换$("#tip-back-btn-1").click(function()。
@ObsidianAge 感谢您的建议。我以前尝试过这种方法，但是如果我想使用多个 Id 并调用多个函数怎么办。
我不太明白你在问什么；此更改仅使用事件委托。它解决了问题吗？你总是可以只有两行，比如$("document").on("click", "#tip-back-btn-1", function1() ...和$("document").on("click", "#tip-back-btn-1", function2() ...。别忘了你总是可以使用类选择器或将目标元素传递给函数本身:)
@ObsidianAge 我不知道您可以在文档中多次使用 $("document").on。
@ObsidianAge 其实你的建议对我有用！谢谢！

标签： javascript twitter-bootstrap bootstrap-tour

【解决方案1】：

你可以尝试在函数之外定义它

var tour = new Tour();
    $(function () {
tour = new Tour({
                steps: steps
            });tour.init();
            tour.start(true);
            tour.goTo(0);
}

希望能解决你的问题

【讨论】：