当用户单击按钮或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元素尚不存在。或者也许我的所有游览代码尚未加载。
答案 0 :(得分:0)
您可以尝试在功能之外定义它
var tour = new Tour();
$(function () {
tour = new Tour({
steps: steps
});tour.init();
tour.start(true);
tour.goTo(0);
}
希望能解决您的问题