jquery - 从 jsf / primefaces 将文本复制到剪贴板并不总是有效

Question

此处提到的从 jsf / primefaces 将文本复制到剪贴板的分辨率按原样工作，但对我来说似乎有一些问题，请在下面找到我的代码：

    <h:outputScript library="default" name="js/jquery-1.9.1.min.js"/>
    <h:outputScript library="default" name="js/jquery.zclip.min.js"/>
    <script type="text/javascript">
    $(document).ready(function(){

    $('a#copy_coupon_code').zclip({
        path:"#{resource['default:js/ZeroClipboard.swf']}",
        copy:$('span#offer_details_form:coupon_code').text()
    });
    });
    </script>                    
<h:outputText id="coupon_code" value="ABCD11" />
<a id="copy_coupon_code" href="#">Copy coupon and redirect</a> 

这是代码在浏览器中的样子：

复制到剪贴板不起作用，非常感谢任何帮助......

Answer 1

这是 JSF 和 jQuery 集成的一个众所周知的问题，因为 jsf 使用冒号:字符来表示组件的 id，而冒号:字符是特殊字符（冒号:是为 jQuery 选择器保留的）所以你必须通过在前面放置两个反斜杠来进行转义其中：

$('span#offer_details_form\\:coupon_code')

我刚刚测试过，它工作正常（从这里下载 zClip ）：

<h:head>
    </h:head>
    <h:body>
        <h:outputScript library="js" name="jquery-1.9.1.min.js"/>
        <h:outputScript library="js" name="jquery.zclip.min.js"/>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#copylink').zclip({
                    path:"#{resource['js:ZeroClipboard.swf']}",
                    copy:$('#myform\\:txt1').text()
                });
            });
        </script>
        <h:form id="myform">
            <p:panel>
                <h:outputText id="txt1" value="Stackoverflow"/>
                <a id="copylink" href="#">Copy Description</a>
            </p:panel>
        </h:form>
    </h:body>

结果：