How to target javascript rendered markup

Question

I am struggling with targeting markup that is rendered by a plugin. I am using this plugin:

http://jellekralt.github.io/Responsive-Tabs/demo/demo.html

You will find the site here:

kenaesthetic.com

I am trying to target the #infotabs a selector but there seems to be a disconnect. The plugin takes my initial markup and re-renders it. I now need to target the generated markup but seem unable. How is this done?

Answer 1

You need to use event delegation. You would put the listener on the parent of the dynamically created markup and wait for the event to bubble up.

$('.holds-html-generated-by-plugin').on('click', '.generated-by-plugin', function () {
  // this will be '.generated-by-plugin'
  console.log(this);
});

Answer 2

The plugin's documentation should tell you what you need to know about how it changes the DOM. If it doesn't, it's poorly-documented.

If the plugin is poorly-documented, the basic approach (if you want to use it) is to apply the plugin to your page and use the tools built into your browser to see how it changes the DOM. All modern browsers have a set of quite useful tools built into them; look through the menus (or press F12, which is emerging as the standard keystroke for opening them).

Once you know how the plugin changes the DOM, you can write selectors to target the changes. Be sure you don't try to use those selectors until after the plugin has applied its changes, as they won't be relevant yet. So either don't use them until the plugin has done its thing, or use them in delegated handlers.