部份手机(ios8、ios9) clipboard.min.js 跳出多次复制成功的问题及其解

问题描述

第一次进来打开页面弹窗，点击 复制按钮 弹出提示 复制成功 这是没问题的，但是关闭弹窗（这时候的弹窗是 remove 掉的）再打开弹窗，再次点击复制的时候会弹出两次复制成功 ，根据代码调试实践总结这是因为第一次来 var copy = new Clipboard( elem ) 的时候实例化了一次，第二次再打开弹窗再点击复制的时候又 var copy = new Clipboard( elem ) 了一次，所以说再次点击会弹出两次 复制成功，如果每次关闭弹窗前不去销毁 copy 这一实例的话，每次打开弹窗就会实例化 +1，所以要想解决这个问题的话必须每次关掉弹窗的时候要销毁这一实例。具体的实现方法参考下面的代码：

部份代码示例

# htm
<script type="text/template" id="tplCardNum">
    <div class="vodal-card vodal-common">
        <span class="icon-bei"></span>
        <h3>恭喜您获得<span>【{$gift_name}】</span></h3>

        <table border="1" cellspacing="0" cellpadding="0" align="center" class="vodal-card-table">
            <tr>
                <td width="30%">礼包序列号</td>
                <td width="40%" class="break-word">{$activation_code}</td>
                <td width="30%"><a href="javascript:;" data-clipboard-text="{$activation_code}" id="vodalCardCopy_{$activation_code}" class="btn stroke">复制</a</td>
            </tr>
        </table>

        <p class="card-tips">请在今天内登录游戏进行领取</p>
    </div>
</script>

# js
var t = {
    copyCache: {},
    copy: function( elem ) {
        var _this = this;
        _this.copyCache[elem] = new Clipboard( elem );

        _this.copyCache[elem].on( "success", function( e ) {
            $( elem ).text( "已复制" );
            e.clearSelection();
        } );
        _this.copyCache[elem].on( "error", function(a) {
            $.signDialog.alert( "由于系统不支持，请手动复制礼包码" );
        });
    },

    _getMyReward: function() {
        var _this = this;

        $.signUtil.callApi( {
            url: "url",
            type: "post",
            successCall: function( res ) {
                if( res ) {
                    if( +res.code === 1 ) {
                        if( res.data.length > 0 ) {
                            $.signDialog({
                                content: $.signUtil.getHtml( _this.tplRewardMy, {
                                    REWARD_CONTENT: $.sdkUtil.T( _this.tplRewardTr, res.data )
                                } ),
                                closeBtnState: true,
                                dialogWidth: "80%",
                                buttons: {
                                    "确定": {
                                        class: "vodal-confirm-btn",
                                        fn: function( name, obj ) {
                                            obj.destroy();

                                            // 关闭弹窗，销毁 Clipboard 复制，不然有些手机（ios8、ios9）会重复复制
                                            for( var i = 0, len = res.data.length; i < len; i++ ) {
                                                (function(j) {
                                                    _this.copyCache["#vodalCardCopy_" + res.data[j].activation_code].destroy();
                                                })(i);
                                            }
                                        }
                                    }
                                }
                            });

                            for( var i = 0, len = res.data.length; i < len; i++ ) {
                                (function(j) {
                                    _this.copy( "#vodalCardCopy_" + res.data[j].activation_code );
                                })(i);
                            }

                        } else {
                            alert( "您暂时还没有奖品~" );
                        }
                    } else {
                        alert( res.message );
                    }
                }
            }
        } );
    }
}