如何调整JavaScript代码以持续检测指定CSS类是否存在并触发按钮显示（附调试问题）

一、持续检测.acf-gallery-attachment类是否存在（高效方案：MutationObserver） #

你的初始代码只在页面加载时检测一次，而目标元素是用户操作后才动态生成的，所以可以用MutationObserver监听DOM变化，这比定时轮询更高效，不会无端占用资源。

具体实现代码如下：

// 选择要监听的根节点（建议选目标元素的最近父容器，比document.body更高效）
const targetNode = document.body;

// 配置观察规则：监听子节点的添加/移除，以及跨层级的DOM变化
const config = { childList: true, subtree: true };

// DOM变化时触发的回调函数
const callback = function(mutationsList, observer) {
    // 检查目标元素是否已存在
    if ($(".acf-gallery-attachment").length > 0) {
        $('.acfef-submit-button').css("display", "block");
        // 若只需触发一次，可在这里停止观察
        // observer.disconnect();
    }
};

// 创建观察者实例并启动监听
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

如果需要重复检测（比如用户可能多次生成该元素），就去掉observer.disconnect()这行代码即可。

备选方案：定时轮询（setInterval） #

如果觉得MutationObserver有点复杂，也可以用简单的定时轮询，缺点是会定期占用资源，适合简单场景：

// 每500毫秒检测一次，可根据需求调整间隔
const checkTimer = setInterval(() => {
    if ($(".acf-gallery-attachment").length > 0) {
        $('.acfef-submit-button').css("display", "block");
        // 找到元素后清除定时器，避免重复执行
        clearInterval(checkTimer);
    }
}, 500);

二、修复上传按钮点击事件不生效的问题 #

你修改后的点击事件绑定失败，核心原因是.file-custom .acf-gallery-upload是动态生成的元素——页面加载时它还不存在，直接给它绑定事件自然不会生效。这时候需要用事件委托，把事件绑定到页面加载时就存在的父元素上，利用事件冒泡触发回调。

修改后的代码如下：

// 选择一个页面加载时就存在的父元素（比如document，或更具体的容器）
$(document).on('click', '.file-custom .acf-gallery-upload', function() {
    $('.acfef-submit-button').css('display', 'block');
});

原理是：点击事件会冒泡到父元素（这里是document），父元素根据事件的目标元素匹配选择器，再执行回调。这样不管元素何时生成，只要符合选择器就能触发事件。

如果知道上传按钮的固定父容器（页面加载时就存在），推荐用更具体的父元素代替document，比如：

// 假设.acf-gallery-wrapper是上传按钮的固定父容器
$('.acf-gallery-wrapper').on('click', '.file-custom .acf-gallery-upload', function() {
    $('.acfef-submit-button').css('display', 'block');
});

这样能减少事件冒泡的层级，性能更优。

内容的提问来源于stack exchange，提问作者mickdeez