bootstrap tour for dynamic content

Question

i have a tour like below, after first next is done i go fetch dynamic html content using ajax, this is inserted into html body. the next step references an element that was pulled from Ajax request. problem is my next step does not show any popover it just seems to have ended without any error msg or notifications. my guess is since it cannot see the 2nd step element yet in DOM it ends itself. How can i fix this?

   tour = new Tour({
        steps: [
        {
            element: "#element1",
            title: "Test1",
            content: "Let's Go earn some points",
            onNext: function () {
                    call function that does ajax request for dynamic html and appends to section in html.body
            });
            }
        },
        {
            element: "#elementfrom_OnNext_ajax_request",
            title: "Import ",
            content: "check this out "
        }
        ]
    });