为WooCommerce的ajax_add_to_cart按钮添加关闭自定义模态框功能

问题根源 #

1. 语法错误：原代码中选择器的引号嵌套逻辑错误，$('.btn[data-product_id='11068651']')里的单引号会导致浏览器解析失败，无法正确识别目标元素。
2. 动态元素绑定失效：模态框内的按钮是动态生成的（模态框加载后才渲染到DOM中），而你的代码在页面初始加载完成时就执行了，此时按钮还未存在于DOM，因此无法完成事件绑定。而在控制台执行时按钮已生成，所以代码能生效。

解决方案 #

方案1：使用jQuery事件委托（推荐） #

事件委托通过将事件绑定到已存在的父级元素（比如document或模态框的直接父容器），利用事件冒泡机制处理动态生成元素的事件，同时修正选择器的引号问题：

add_action( 'wp_footer', 'single_add_to_cart_event_button_function' );
function single_add_to_cart_event_button_function() {
    ?>
        <script type="text/javascript">
            (function($){
                // 绑定到document，监听指定按钮的点击事件
                $(document).on('click', '.btn[data-product_id="11068651"], .btn[data-product_id="11068652"]', function(e){
                    // 关闭模态框，jQuery的hide()等价于设置display:none
                    $(".speak-up-modal").hide();
                    // 若需要阻止WooCommerce默认的加购行为，添加以下两行：
                    // e.preventDefault();
                    // e.stopPropagation();
                });
            })(jQuery);
        </script>
    <?php
}

方案2：在模态框渲染完成后绑定事件 #

如果你的自定义模态框有显示触发的专属事件（比如show或自定义事件），可以在该事件回调中绑定按钮点击事件，确保按钮已存在于DOM中：

add_action( 'wp_footer', 'single_add_to_cart_event_button_function' );
function single_add_to_cart_event_button_function() {
    ?>
        <script type="text/javascript">
            (function($){
                // 假设模态框显示完成时触发"speak-up-modal-shown"事件
                $(document).on('speak-up-modal-shown', function(){
                    $('.btn[data-product_id="11068651"], .btn[data-product_id="11068652"]').click(function(){
                        $(".speak-up-modal").hide();
                    });
                });
            })(jQuery);
        </script>
    <?php
}

额外注意事项 #

• 如果仅需关闭模态框，无需阻止默认加购行为，可保留WooCommerce的原有逻辑；若要替换按钮功能，需添加e.preventDefault()和e.stopPropagation()来阻止默认的AJAX加购动作。
• 打开浏览器控制台检查是否有JS报错，排除其他代码冲突导致的事件失效问题。

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