有没有办法在按钮或链接中调用bootstraptour函数?

时间:2019-01-29 21:33:06

标签: javascript twitter-bootstrap bootstrap-tour

当用户单击按钮或ID为“#tip-back-btn-1”的链接时,我想调用bootstraptour函数

有没有一种方法可以直接在按钮或链接中调用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);
});

但这不起作用

下面是我的bootstraptour代码供参考

    '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为“ button”的DOM元素尚不存在。或者也许我的所有游览代码尚未加载。

1 个答案:

答案 0 :(得分:0)

您可以尝试在功能之外定义它

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

希望能解决您的问题