Question

I’m using a tutorial plugin – http://particlebits.com/code/jquery-tutorial/

which has this code attached to the number of tutorial steps you require.

<div for="tutstep4" data-target="#publishbutton" data-arrow="tc" data-location="tr" style="display: block; ">
       <h1>Almost Done!</h1>
       <p>
        Now click "Publish" and you are done.
        </p>
    </div>

My question is how do I trigger a click event from the the tags that are attached to each tutorial step.

    <a id="tutorial-done" class="tutorial-button" href="javascript:void(0);" style="display: block; ">Done!</a>
<a id="tutorial-cancel" class="tutorial-cancel" href="javascript:void(0);">X</a>
<a id="tutorial-next" class="tutorial-button" type="button" href="javascript:void(0);" style="display: none; ">Next</a>
<a id="tutorial-prev" class="tutorial-button" type="button" href="javascript:void(0);" style="display: block; ">Prev</a>

These tags are moved between steps with the same Id’s so if I call

$('.tutorial-button').click(function(){
do something
})

the button has already been clicked and the function doesn’t register.

I dont want to edit the tutorial.js file as it’s used across different pages.
Is there something I can do to ‘listen’ to when ‘#tutorial-prev’ is clicked and then call a function based on the div it’ attached to?

i.e. if ‘#tutorial-prev’ is clicked when the tutorial step is 3, do something ?

UPDATE:

After stepping away from it for a while I found an easier solution that simply use a monkey patch on the functions within the script and add my own personal code which consists of opening/closing the required div.

So it was like

$.fn.tutorialNext() {
 // start of original next code.
 //end of original code.
 myfunc();
}

Not exactly pretty but a quick solution for the one page where I required something customised.

The issue I originally faced was that the anchor tags had already been removed when the Next() function was run so there was no element to perform the function on.

Answer 1

I’m not sure if I have clear what you are trying to achieve, but when you have the click handler:

$("'#tutorial-prev").on("click", dosomething);

In do something you can replicate the click event everywhere you want with:

$(selector).trigger("click");