jquery（.on）无法使用primefaces.ui文件上载取消，为什么？

我正在使用primefaces 8.0和jsf 2.2，并尝试使用jquery$函数选择.ui fileupload cancel元素并侦听.on，但在使用时它不起作用。单击它仅在第一次单击时起作用

<ui:composition template="/templates/main.xhtml">

<ui:define name="body">

<script>

    $(document).ready(function(){
        $(".ui-fileupload-cancel").click(function(){
                alert("Works");
        });
    });
                
    $(document).ready(function() {
       $(".ui-fileUpload").on("click",".ui-fileupload-cancel",function() {
            alert("Does not work");
        });
    })
                   
</script>

        <p:accordionPanel id="uploadPanel" activeIndex="null">

            <p:tab id="uploadTab" title="title">
    
                <p:fileUpload 
                    id="upload" listener="#{Controller.uploadListener}"
                    mode="advanced"  update="messages @this"
                    allowTypes="/(\.|\/)(xml)$/" fileLimit="1"
                    oncomplete="uploadcomplete()" onerror="uploadcomplete()" />

                <p:remoteCommand name="uploadcomplete" update="someId anotherId"
                    process="@this" />

                <p:remoteCommand name="doClear"
                    action="#{Controller.doClear}" update="someId anotherId"
                    process="@this" />

                <p:growl id="messages" showDetail="false" />
            </p:tab>
        </p:accordionPanel>

从primefaces文件上载文档进行蒙皮

类别适用

.ui文件上载主容器元素

.ui文件上载按钮工具栏按钮栏

.ui文件上载选择浏览按钮

.ui文件上载按钮

.ui文件上载取消按钮

.ui文件上载内容容器

---

我缺少什么？

将事件添加到文档而不是.ui文件上载

 $(document).on("click",".ui-fileupload-cancel",function() {
        alert("Does not work");
    });

---

我试过了，但仍然不起作用。在jsf中，body标记看起来像这样，有关系吗？尝试$document.on直到相同，但当我使用另一个元素来测试它时，我使用了uploadPanel和$document，它起作用了！！但是对于.ui文件上传，没有响应。上面的答案应该有效。原因是Jquery事件委派，以及呈现页面时不存在“取消”按钮。请参见此处的说明：