javascript - Hopscotch.js，动态创建的模态目标不起作用

Question

我正在使用linkedIn 的Hopscotch。

我想向模态弹出窗口显示一个气泡，但跳房子似乎跳过了模态的步长。

我的猜测是问题与初始化游览对象时跳房子目标不存在有关，因为模态显示在游览步骤的“onNext”事件上。我已经尝试将实际对象和 id-selector 作为“目标”属性。我也无法工作。

一个极端的选择可能是制作两个不同的游览，并在第一个的 onEnd 事件上显示模态，等到模态渲染完成，然后显示“下一个”游览。但在诉诸这种怪异之前，我想找到一个巧妙的解决方案。

Answer 1

我有同样的问题，所以我添加了一个方法来刷新下一步目标元素：

/**
 * getCurrTarget
 *
 * @return {Object} The currently visible target.
 */
 {some code...}


 /**
 * setNextTarget   
 * @ Refresh the target dom element for the next step
 */
 this.setNextTarget = function(el) {
  currTour.steps[currStepNum+1].target = el;
 };

然后我像这样使用它：

 {step 1 code...}
 onShow:function(){
   hopscotch.setNextTarget($("#myStep2Target")[0]);                         
 }

不是最好的方法，但可以快速进行......希望它有所帮助;）

Answer 2

要在每次运行游览时让 hopscotch 解析动态目标，您可以简单地克隆游览定义，即

hopscotch.startTour($.extend(true, {}, tour));