I'm using the below code to check if a class exists, and if so, show a button. However, the class can only exist after a user has done something on the page - so it will never exist on page load. How can I adjust this code to continuously check if the class exists, and not just on page load?
if($(".acf-gallery-attachment").length()){
return $('.acfef-submit-button').css("display", "block");
}
EDIT:
I've adjusted my code to look for when the user clicks the file upload button instead, but still cannot get it to work:
$('.file-custom .acf-gallery-upload').click(function () {
$('.acfef-submit-button').css('display', 'block');
});
Don't think this is a good thing to do, but if you're looking to "continuously check" something, you could go with setInterval.
setInterval(checkSomething, 1000);
function checkSomething(){
if($(".acf-gallery-attachment").length()){
return $('.acfef-submit-button').css("display", "block");
}
}
how about a mutation observer? set it to observe your container and its children for a change of class
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// Select the node that will be observed for mutations
const targetNode = document.getElementById('container');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
if( $('.myclass').length ){
alert('my class is available');
}else{
alert(' my class not available');
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
$('#btnAddClass').click(() =>{
$('#myspan').addClass('myclass');
})
$('#btnRemoveClass').click(() =>{
$('#myspan').removeClass('myclass');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "container">
<span id="myspan"></span>
<button id="btnAddClass">
add class
</button>
<button id="btnRemoveClass">
remove class
</button>
</div>