Similarly to this question Applying an onclick event to an element that doesn't exist on page load I am asynchronously loading an iFrame which I apparently can only style with javascript. However, I need to make some adjustments to the styling and therefore am trying to add an event to an element that is not there on page load. I figured that using the method in the answers to the aforementioned question, I could simply add a 'load' instead of a 'click' event.
$('.widget-box').on('load','#iframeContainer',function(e){
// my code
});
This doesn't seem to work, however. Is there any other solution to my problem?
edit: as one of the commenters suggested, I used the mutation observer. It works now but doesn't seem very clean. If you have any suggestion for improvements, I'd be happy to hear.
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
(function($) {
$('#okomoIframeContainer').load(function() {
console.log('its loaded');
})
})(jQuery);
});
});
observer.observe(widgetWrap, { childList: true });
edit2: Also, with this method I still can't modify the iframe's content because of the same-origin policy