I am currently working on a project that involves creating a dynamic walk-through wizard for users. The code I have developed adds an overlay to the page and generates a container with next and previous buttons.
By utilizing Ajax, I populate the container with content for each step as users navigate through the wizard by clicking the Next/Prev buttons.
In order to customize the styles and functionality for each step, I apply unique classes to the container and buttons. For instance, the first step is associated with the class "step1" while subsequent steps follow suit with "step2," "step3," and so forth.
The challenge arises when attempting to apply functions to buttons based on dynamically changing classes using jQuery.
Here is an excerpt of the code I've implemented to set up the environment, load files for each step, and assign classes:
jQuery(function ($) {
$('body').attr('onboarding_step', 'step1');
$('body.wp-customizer').addClass('skizzar_onboarding');
$('<div id="so_overlay"></div>').insertBefore('body.wp-customizer');
// First Step
$('#so_overlay').html('<div id="onboarding_steps_container" class="step1"></div>');
$('#onboarding_steps_container').html('<div class="onboarding_steps"></div><div class="button_holder"><button id="prev" class="step1"><i class="fa fa-chevron-left"></i> PREV</button><button id="next" class="step1">NEXT <i class="fa fa-chevron-right"></i></button></div>');
// Steps Array
var steps = [
"wp-content/plugins/skizzar-onboarding/ajax/step1.php",
"wp-content/plugins/skizzar-onboarding/ajax/step2.php",
"wp-content/plugins/skizzar-onboarding/ajax/step3.php",
"wp-content/plugins/skizzar-onboarding/ajax/step4.php",
"wp-content/plugins/skizzar-onboarding/ajax/step5.php",
];
counter = 0;
$('.onboarding_steps').load(steps[counter]);
$('#next').click(function () {
counter = (counter + 1) % steps.length;
$('.onboarding_steps').load(steps[counter]);
$('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1));
$('body').attr('onboarding_step', 'step' + (counter + 1));
});
$('#prev').click(function () {
counter = (counter - 1) % steps.length;
$('.onboarding_steps').load(steps[counter]);
$('#onboarding_steps_container, .button_holder button, #so_overlay').attr('class', 'step' + (counter + 1));
$('body').attr('onboarding_step', 'step' + (counter + 1));
});
});
Despite my efforts, encountering an issue when trying to trigger an action upon clicking a button with a specific class using jQuery. Here's an example:
$('.step2 #next').click(function () {
console.log('step 2 pressed');
});
Unfortunately, nothing happens in this scenario. It seems that the problem stems from the class changes made via jQuery, but a solution eludes me at the moment.
If you wish to explore the issue further, feel free to visit the following jsfiddle link: https://jsfiddle.net/dkzjpnbo/3/
(Please note that since jsfiddle cannot load files, you may inspect the elements to see that upon clicking NEXT with the "step2" class, it should trigger an alert, yet no response occurs.)