zclip in primefaces dialog is not working

Question

I have the site export.xhtml below which loads the mailListDialog.xhtml file:

export.xhtml:

    <?xml version="1.0" encoding="UTF-8"?>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml">
      <ui:define name="window_title">eMember - #{messages['title_label']}
      </ui:define>
      <ui:define name="header_title">
        <h:outputText value="eMember - #{messages['title_export_mail']}" align="center" rendered="#{exportController.type == 'MAIL'}"/>
      </ui:define>
      <ui:define name="content">
        <h:form id="exportForm"  style="height:100%">
          <!-- more data -->
          <p:commandButton onclick="PF('mailList').show()" value="#{messages['export_create_mail']}" update=":mailListForm"
        rendered="#{exportController.type == 'MAIL'}"/>
        </h:form>
        <!-- Mail-List-Dialog -->
        <ui:include src="/pages/secured/dialogs/mailListDialog.xhtml" />
      </ui:define>
    </ui:composition>

The mailListDialog.xhtml looks like:

    <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
    <h:outputScript library="primefaces" name="jquery/jquery.js"/>
    <h:outputScript library="default" name="js/jquery.zclip.min.js"/>
    <script type="text/javascript">
    alert("init *" + $("#mailListForm\\:data").text() + "*");  
    $(document).ready(function(){
    $('#copyButton').zclip({
       path:"#{resources['default:js/ZeroClipboard.swf']}",
       copy:$('#mailListForm\\:data').text(),
       afterCopy: function()
       {
           console.log($("hallo55 *" + $("#mailListForm\\:data").text() + "*" + " was copied to clipboard"));
           alert("hallo55 *" + $("#mailListForm\\:data").text() + "*");
       }
     })
});
</script>
<p:dialog header="Mailverteiler"
    widgetVar="mailList" resizable="false" id="mailListDlg"
    showEffect="clip" hideEffect="clip" modal="true" appendTo="@(body)">

    <h:form id="mailListForm"> 
        <p:commandButton id="copyButton" icon="ui-icon-copy"/><br></br>
        <h:outputText id="data" value="#{exportController.mailList}"/>        
    </h:form>
</p:dialog>

If I'm clicking on the button in export.xhtml the dialog will be displayed and I can see the messageBox of the first alert with the mailing list. But if I'm clicking on the copyButton then nothings happens.

I tried to use $('#copyButton').zclip or $('#mailListForm\:copyButton').zclip({ but neither of them worked.

Does anybody know how I can solve this issue?