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

Question

我正在使用linkedIn的Hopscotch。

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

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

一个极端的选择可能是制作两个不同的游览，并在第一个的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.startTour($.extend(true, {}, tour));