jQuery event that triggers after CSS is loaded?
Rather than creating a new link element and appending it to the head, you could retrieve the contents of the stylesheet with an AJAX call, and insert it into an inline style block. That way, you can use jQuery's 'complete' callback to fire off your check.
$('#theme-selector a').click(function(){
var path = $(this).attr('href');
$.get(path, function(response){
//Check if the user theme element is in place - if not, create it.
if (!$('#userTheme').length) $('head').append('<style id="userTheme"></style>');
//populate the theme element with the new style (replace the old one if necessary)
$('#userTheme').text(response);
//Check whatever you want about the new style:
alert($('body').css('background-color'));
});
});
I haven't actually tested this code, so there may be some syntax-y errors, but the logic should be sound enough.
Execute jQuery code after all CSS rules have been applied
$(window).load()
fires after the whole page (images, CSS, etc.) has loaded.
Jquery Event Not Triggering for DOM Elements Created after page load
Currently what you are using is called a direct binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).
i.e.
$(document).on('event','selector',callback_function)
Example
$(document).on('click', '.score', function(){
//Your code
alert("clicked me");
});
In place of document
you should use closest static container.
The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.
Related Topics
Difference Between Two Dates in Years, Months, Days in JavaScript
How to Show a Running Progress Bar While Page Is Loading
How to Make Jquery UI Tabs Scroll Horizontally If There Are Too Many Tabs
How to Transition the Flex-Grow of a Flex Box to Produce an Animation
Jquery Equivalent of Yui Stylesheet Utility
Open a File with Default Program in Node-Webkit
JavaScript Es6 Promise for Loop
Difference Between Innertext, Innerhtml and Value
Run Greasemonkey Script on the Same Page, Multiple Times
How to Match Overlapping Strings With Regex
CSS Hover VS. JavaScript Mouseover
CSS Selector for Targeting Only Immediate Children and Not Other Identical Descendants
Setting Rounded Corners for Svg:Image
Angularjs CSS Animation + Done Callback