Shopify购物车抽屉中点击复制折扣码功能异常问题

问题根源 #

购物车抽屉是Shopify动态渲染的内容——初始页面加载完成时（$(document).ready()执行阶段），抽屉内的.copy_coupon元素还未被创建，直接绑定的点击事件无法作用到后续动态生成的元素上。只有当抽屉被再次触发加载后，元素存在时事件才会生效，这就是为什么需要二次加载才能正常工作。

解决方案：使用事件委托 #

通过将事件绑定到**已存在的父级元素（或document）**上，利用事件冒泡机制，实现对动态生成元素的事件监听。同时可以合并重复的点击事件，优化代码逻辑。

修改后的完整代码 #

{% if cart.total_price > 0 %}
<div class="coupon_container">
    <div class="left_text">
        <strong>首单直降50%</strong>
        <small>*仅限单件商品使用。</small>
    </div>                     
    <div class="coupon_tab">
        <span class="copy_coupon"> 
            <small class="tooltiptext">已复制</small>
            <small>使用优惠码</small><br>
            <strong>FIRST50</strong>
        </span>
    </div>  
</div>
<style>
.copy_coupon{position:relative;cursor: pointer;}
.tooltiptext{
    display: none;
    position: absolute;
    background: rgb(0 0 0 / 61%);
    color: rgb(255, 255, 255);
    top: -25px;
    padding: 2px 12px;
    border-radius: 5px;
}
</style>
<script>
$(function(){
    // 用事件委托绑定点击事件，兼容动态生成的元素
    $(document).on('click', '.copy_coupon', function() {
        navigator.clipboard.writeText("FIRST50")
            .then(() => { 
                console.log("复制成功");
                $(this).find('.tooltiptext').show(); // 显示提示
            })
            .catch((error) => { alert(`复制失败！${error}`); });                          
    }); 

    // 鼠标移出隐藏提示
    $(document).on('mouseout', '.copy_coupon', function() {
        $(this).find('.tooltiptext').hide();
    });
});
</script> 
{% endif %}

代码说明 #

1. 事件委托：将click和mouseout事件绑定到document上，指定触发目标为.copy_coupon，无论元素是初始加载还是动态生成，都能响应事件。
2. 合并逻辑：把原本分开的两个click事件合并，复制成功后直接显示提示，减少代码冗余。
3. 优化样式：给.copy_coupon添加cursor: pointer，让用户明确这是可点击元素。

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