jQuery代码嵌入HTML单产品页不生效但控制台运行正常问题求助

核心成因 #

• 目标DOM为动态渲染：你需要操作的.add_to_cart_custom、.delivery--information等元素不属于页面初始静态DOM，是初始DOM加载完成后，由商品信息渲染、购物车模块加载等业务逻辑通过JS动态插入的。$(document).ready仅在初始DOM树构建完成时触发，此时动态元素还未插入页面，你获取的子元素长度为0，判断条件不满足，代码不会执行。你打开控制台时页面已经完成所有动态渲染，所以代码可以正常运行。
• jQuery标识符冲突：站点可能在单产品页开启了jQuery.noConflict()配置释放$标识符，避免多库冲突，此时用$调用jQuery方法会直接报错。如果其他页面没有该配置，就会出现仅单产品页代码失效的情况。
• 前置JS报错阻断执行：单产品页如果在你的自定义代码运行前有其他JS抛出未捕获的异常，会直接阻断后续所有JS代码的执行，你的代码自然无法生效。
• 脚本加载顺序异常：如果单产品页的jQuery引入标签加了async/defer异步加载属性，或者你的自定义代码比jQuery更早加载，会导致$未定义，代码运行失败。

解决方法 #

1. 适配动态DOM场景（最推荐，适配绝大多数电商站点动态渲染的情况）
   替换原有$(document).ready逻辑，改用元素存在检测方案，确认目标元素渲染完成后再执行逻辑，代码示例：

function waitForElement(selector, callback) {
    if (jQuery(selector).length) {
        callback();
    } else {
        setTimeout(() => waitForElement(selector, callback), 100);
    }
}

waitForElement('.add_to_cart_custom .delivery--information', function() {
    const lenth_2 = $('.add_to_cart_custom .delivery--information').children().length;
    if( lenth_2 > 1 ){
        $('.add_to_cart_custom .delivery--information').hide();
        $('p.delivery_custom').parent('.add_to_cart_custom .delivery--information').show();
        $('.product_specs2 .item.attr_item_lead_time').hide();
    }
});

2. 解决jQuery标识符冲突
   把代码中的$统一替换为jQuery，或者用闭包传入$参数，避免冲突，示例：

jQuery(document).ready(function($) {
    // 该闭包内可正常使用$调用jQuery方法
    const lenth_2 = $('.add_to_cart_custom .delivery--information').children().length;
    // 其余逻辑保持不变
});

3. 调整脚本加载顺序
   将你的自定义JS脚本放在jQuery引入标签的后方，或者给自定义脚本加上defer属性，确保jQuery加载完成后再执行你的代码。
4. 修复前置JS错误
   打开浏览器开发者工具的Console面板，查看单产品页的报错信息，修复对应报错即可解除后续代码的执行阻断。

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