Dynamically inserted elements can't be references for a step?

sjramsey commented 9 years ago

When I run the following code - I can't use the dynamically inserted <h2 id="subheader"> as a reference for a step. It returns a Your tripData is not valid at index: 1 error. Is there a way to dynamically add references?

Code

Here's the html (body only):

<body>
    <div id="main">
        <h1>Heading 1</h1>
    </div>
</body>

Here's the js:

var Demo = new Trip(
    [
        { 
            sel : $("#main h1"), 
            content : "This is the heading", 
            position : "n",
            onTripStart: function(tripIndex) {
                $('<h2 id="subheader">Hello</h2>').insertAfter('#main h1');
            }
        },
        { 
            sel : $("#subheader"), 
            content : "This is the sub heading", 
            position : "n",
        }
    ], {
        delay : -1,
        showNavigation: true,
        animation: 'fadeIn'
    }
);

$("#main h1").on("click", function() {
    Demo.start();
});

EragonJ commented 9 years ago

Hey @sjramsey , please check the documentation http://eragonj.github.io/Trip.js/doc-configuration.html#sel , all you need is to pass that selector in string.

sjramsey commented 9 years ago

Perfect - thanks @EragonJ. Loving this plugin!

EragonJ commented 9 years ago

I am glad you like it ! And by the way, we are working on related feature that developers can wait until some works are done before going to next step, with this feature, you can make sure your element will be there maybe after an ajax call for example.

EragonJ / Trip.js

Dynamically inserted elements can't be references for a step? #106

Code