If you're looking to incorporate the .load function, make sure not to confuse it with the load event handler.
The .load() function is perfect for loading data into an element - you can find more details in this link
Here's a simple example to guide you through, although the code provided is just a template for you to customize. :)
HTML:
<button id="clickMe" type="button">Click Me</button>
<div id="targetLoad"></div>
jQuery:
$('#clickMe').on('click', function()
{
$('#targetLoad').load('path/to/html.html')
});
This script will load html.html into the div identified by the id of targetLoad.
The issue with your .on() function could be because you're using a single word instead of a class or id selector. Utilize # for ids and . for classes.
Update 1
It seems this is related to an iframe - the challenge arises because it's a dynamic element that isn't technically part of the DOM, so the event may not trigger. However, you can address this by targeting dynamic elements like so:
$(document).on('click', '.myDynamicElement', function() {})
This snippet applies the click action on the document for elements with the class of myDynamicElement, allowing you to work with dynamic elements.
To target the iframe specifically, consider using .find() as the iframe is somewhat separate. The suggestion below should help:
var element = $(document).find('.myIframe').find('figure');
$(document).on('click', element, function() {});
Update 2 - Requested by OP in the comments below
Here's an example of how to handle dynamic events:
$('body').on('change', '.myDropdown', function()
{
alert($(this).val())
})
In this scenario, every change to an input with the class of .myDropdown will trigger an alert displaying its current value.