WordPress Image Map Pro插件SVG元素jQuery遍历失效求助

我用WordPress的Image Map Pro插件生成了带可点击区域的SVG平面图，插件会在页面加载时生成对应HTML代码。我想通过jQuery遍历这些SVG元素获取data-title属性值，但页面加载时的遍历代码找不到任何元素；点击某区域后执行相同遍历代码却能成功获取所有元素。我注意到插件JS文件是最后加载的，即使把我的JS文件放在插件JS之后加载也没用。遍历非插件生成的SVG元素一切正常，只有插件生成的SVG元素需要触发点击这类操作才能被遍历到。

无效代码 #

jQuery(document).ready(function(){
    jQuery( ".imp-objects" ).each(function() {
        let valueObjectMapSingleProduct = jQuery(this).attr('data-title');
        console.log("toto");
    });
});

有效代码 #

jQuery('.liste-boutique-nav li').click(function(){
    jQuery( ".imp-objects" ).each(function() {
        let valueObjectMapSingleProduct = jQuery(this).attr('data-title');
        console.log("toto");
    });
});

问题原因 #

Image Map Pro插件是异步动态生成SVG元素的，哪怕插件JS最后加载，它内部可能通过AJAX或延迟渲染的方式生成DOM，document.ready触发时，.imp-objects元素还未插入页面，因此遍历不到。而点击事件触发时，插件已完成SVG渲染，所以能找到元素。

解决办法 #

1. 监听插件自定义渲染完成事件 #

多数动态渲染插件会提供自定义事件，查看Image Map Pro文档，若存在类似imp:renderComplete的事件，可在回调中执行遍历：

jQuery(document).on('imp:renderComplete', function() {
    jQuery(".imp-objects").each(function() {
        let valueObjectMapSingleProduct = jQuery(this).attr('data-title');
        console.log(valueObjectMapSingleProduct);
    });
});

2. 使用MutationObserver监听DOM变化 #

若插件无自定义事件，用MutationObserver监听目标容器的DOM变化，当.imp-objects元素被添加时执行遍历：

jQuery(document).ready(function() {
    // 替换为插件生成的SVG父容器实际选择器（可通过浏览器控制台查看）
    const targetNode = document.querySelector('.imp-container');
    const observerOptions = {
        childList: true,
        subtree: true
    };

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length > 0) {
                const impObjects = jQuery(".imp-objects");
                if (impObjects.length > 0) {
                    impObjects.each(function() {
                        let valueObjectMapSingleProduct = jQuery(this).attr('data-title');
                        console.log(valueObjectMapSingleProduct);
                    });
                    observer.disconnect(); // 完成后停止监听，避免重复执行
                }
            }
        });
    });

    if (targetNode) {
        observer.observe(targetNode, observerOptions);
    }
});

3. 临时延迟执行（不推荐长期使用） #

通过延迟执行等待插件完成渲染，时间可根据实际情况调整：

jQuery(document).ready(function() {
    setTimeout(function() {
        jQuery(".imp-objects").each(function() {
            let valueObjectMapSingleProduct = jQuery(this).attr('data-title');
            console.log(valueObjectMapSingleProduct);
        });
    }, 2000); // 延迟2秒执行
});

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