When a user clicks a button on my screen, a new template is loaded dynamically using jQuery's .load() method. This transition adds new HTML to the page that was not present when the script initially loaded:
(function($) {
$('.go').on("click", function() {
/* Implementing a basic form of reactivity */
var shouldReact = false;
try {
// Animating top part
$('.top-part').animate({
opacity: 0,
}, {
step: function() {
$(this).css('transform', 'translate3d(0,-20px,0)');
},
duration: 'slow'
}, 'swing');
// Animating button
$('.go').animate({
opacity: 1,
}, {
step: function() {
$(this).css({
'height': '100%',
'width': '100%',
'margin-top': '0',
'z-index': '0',
'background-color': '#0cff9b'
});
},
duration: 1500
}, 'swing');
// Animating text
$('.go-text').animate({
opacity: 0,
}, {
step: function() {
$(this).css('transition', 'all 1s ease-out');
}
});
shouldReact = true;
} catch (err) {
console.log(err.message);
shouldReact = false;
}
// Handling transitions based on the outcome
if (shouldReact == true) {
$(this).css({
'cursor': 'initial'
});
$(this).unbind("click");
$(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
function(event) {
$('.welcome_screen').css({
'background-color': '#0cff9b'
});
$('.bottom-part').remove();
render_screen__first_basic_settings();
});
} else {
console.log("Stop! No need to react.");
}
});
// Function to handle initializations for different screens
function genesis(screen_name, screen_selector, screen_contents, the_old) {
let handler = '.welcome_screen';
$(handler).prepend(screen_name);
$(screen_selector).load(ABSPATH + screen_contents);
$(the_old).remove();
}
// Rendering the first basic settings screen
function render_screen__first_basic_settings() {
/*
Each render of a screen must have a genesis, the template which it builds from and a
cleanse / kill. We remove the old, to make space for the new.
*/
genesis('<div id="screen-1" style="z-index:2;"></div>',
'#screen-1',
'/js/setup_theme_templates/basic_settings.html',
'.top-part');
// A point where accessing the template should work properly
}
})(jQuery);
/* Styles for welcome screen & setup experience */
// CSS styles go here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome_screen">
// New HTML content added dynamically goes here
</div>The specific template being loaded is:
// HTML template code goes here
Currently, trying to query $('#basic-settings-template') returns nothing, possibly due to the timing of the script execution. However, adding the template itself seems to be successful. How can we ensure the script runs at the right time to interact with the newly added HTML?