Intro.js: Steps for the new elements (from the javascript dynamic DOM)

[mdtrooper]

I have a code that write by javascript new elements, but I have too the steps write into a array hash "steps" with the new elements.

And when it runs the bubble dialog does not hook to the new elements (makes with javascript).

[afshinm]

Any online demo or jsFiddle?

[elwirra]

I have the same problem. When introjs starts, there are added elements to my DOM (and I rather can't change that, because they are added by user) and introjs can't see them. Can't find out how to workaround this problem. Here is jsfiddle demonstrating this scenario (intro_step7 is added after introjs has started and is not highlighted when reaching this step):

https://jsfiddle.net/3ocyuu65/31/

[martinmicunda]

Is there any update on this solution?

[martinmicunda]

@elwirra have you found workaround?

[citiconsultants]

@martinmicunda @elwirra - Have you found a workaround?

To solve the problem - I am doing like so: (it is a very ugly solution - but it works)

In the fiddle example - add a check to see if a certain step has been reached and then exit and restart the intro to get there.

eg:
i = 0; introProfile.onafterchange(function(targetElement) { var nextSteper = this._currentStep + 1; if ($(targetElement).attr('id') == "intro_step6" && i < 1){ i++; introProfile.exit().start().goToStep(nextSteper); } });

As I said - this works but is not elegant!

[twigs67]

@citiconsultants does indeed work, but as you said, it's quite messy. Has anyone found a better way of doing this?

[Stiveknx]

For those who are interested...
I'm Using this workaround:

Working fine ...
https://github.com/usablica/intro.js/issues/328#issuecomment-107231869