Continuously check if class exists-CodePudding

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');
    });

CodePudding user response：

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");
    }
}

CodePudding user response：

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>