jquery (.on) 不适用于 primefaces .ui-fileupload-cancel，为什么？

Question

我正在使用 primefaces 8.0 和 jsf 2.2，并尝试使用 jquery $ 函数选择 .ui-fileupload-cancel 元素并收听 (.on) 但它不起作用，当我使用 (.click) 时它只能工作第一次点击。

<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-fileupload 主容器元素

.ui-fileupload-buttonbar 按钮栏

.ui-fileupload-choose 浏览按钮

.ui-fileupload-upload 上传按钮

.ui-fileupload-cancel 取消按钮

.ui-fileupload-content 内容容器

我错过了什么？

Answer 1

将事件添加到文档而不是 .ui-fileupload

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