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

Question

I am using primefaces 8.0 and jsf 2.2, and trying to select.ui-fileupload-cancel element using jquery $ function and listen to (.on) but it is not working, when i use (.click) it works just for the first 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>

Skinning from primefaces fileUpload doc.

Class <------------------------------------> Applies

.ui-fileupload <-------------------------> Main container element

.ui-fileupload-buttonbar <------------> Button bar

.ui-fileupload-choose <------------> Browse button

.ui-fileupload-upload <------------> Upload button

.ui-fileupload-cancel <------------> Cancel button

.ui-fileupload-content <------------> Content container

What am i missing?

Answer 1

Add the event to document instead of.ui-fileupload

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