I have a code snippet that is functioning well when wrapped within a document ready event:
jQuery(document).ready(function($) {
$('tr[data-name="background_colour"] input.wp-color-picker').each(function() {
//this section works fine
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').css('background-color', this.value);
//however, this part fails due to frames not being fully loaded
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
});
});
The background color of the tr changes successfully, but the body of the iframe remains unchanged because the iframes are dynamically created and aren't fully loaded at document ready.
To address this issue, I attempted using window.load instead:
jQuery(window).load(function($) {
$('tr[data-name="background_colour"] input.wp-color-picker').each(function() {
//this part functions properly
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').css('background-color', this.value);
//unfortunately, this fails to work as frames are still loading
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
});
});
However, I encountered an error
Uncaught TypeError: object is not a function$('tr[data-name="background_colour"] input.wp-color-picker').each(function() {Fortunately, with the guidance from Guffa's response, I was able to modify the code accordingly for successful execution:
jQuery(window).load(function() {
jQuery(function($){
$('tr[data-name="background_colour"] input.wp-color-picker').each(function() {
$(this).closest('tr').siblings('tr[data-type="wysiwyg']).css('background-color', this.value);
$(this).closest('tr').siblings('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', this.value);
});
});
});