Can’t Target a Widget’s Elements using jQuery

I have a sidebar widget that has some elements inside I’d like to modify. The widget generates it’s code from the “Action Network”, so the content of the widget is loaded dynamically from another site which renders the markup.

<div id=”can-petition-area-build-more-social-housing” style=”width: 100%”> <div class=”can_embed v3 petition”>
<div id=”can_embed_form”>
<div id=”can_embed_form_inner”>

When I am in Chrome, I can target the elements easily, for instance:

jQuery(‘#can_embed_form’).hide();

Hide the DIV. However, when I run the same code from a jQuery file, nothing happens and I get no errors at all. Am enqueuing the script file in the wp_enqueue_scripts action (it spits out code when I type include console.log(‘xyz’) so it’s properly loaded.

This is my JS file:

jQuery(document).ready(function($){
$(‘#can_embed_form_inner’).hide();
});

If I hide something that is not part of the widget from within the JS file, it does hide it, which makes me think the widget is not in the DOM when jQuery is trying to get the div by element.

I would’ve thought the ready() function would take care of that but am clearly wrong.

Any pointers would be greatly appreciated!

Thanks!

Read more here:: Can’t Target a Widget’s Elements using jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *