我如何绑定到没有ID的情况下动态创建的输入类型文件字段。使用jQuery或JavaScript

Question

因此，我使用的是将动态输入（文件类型）字段产生为HTML表单的Joomla组件（RSFORMSPRO）。

我有一个侦听器检查所选的文件是景观，下面是某个文件。当文件不符合要求时。清除文件值（值=''）。这有效。

我也有一个添加文件按钮。将新输入字段添加到DOM之后，该脚本不会在此按钮上发射。

我已经在更改的功能上使用了jQuery。就我的脚本运行而有效。但是重置值不起作用。我知道我是99％。只需要最后一部分即可重置当前输入字段。 html下面：

<div class="formBody" style="background-size: cover;">
                        <div class="rsfp-field-multiple-plus" style="background-size: cover;"><input type="file" name="form[image_upload_gallery][]" id="image_upload_gallery" data-rsfp-skip-ajax="true" class="rsform-upload-box" data-rsfp-minfiles="1" data-rsfp-maxfiles="20" data-rsfp-exts="[&quot;jpeg&quot;,&quot;jpg&quot;,&quot;png&quot;,&quot;gif&quot;,&quot;zip&quot;]"></div><button type="button" class="rsfp-field-multiple-plus-button" data-rsfp-maxfiles="20" data-rsfp-formid="4" onclick="RSFormPro.addMoreFiles(this);">Add another file</button>
                        <span class="formValidation"><span id="component47" class="formNoError">Invalid Input</span></span>
                        <p class="formDescription"></p>
                    <div class="rsfp-field-multiple-plus" style="background-size: cover;"><input type="file" name="form[image_upload_gallery][]" id="image_upload_gallery" data-rsfp-skip-ajax="true" class="rsform-upload-box" data-rsfp-minfiles="1" data-rsfp-maxfiles="20" data-rsfp-exts="[&quot;jpeg&quot;,&quot;jpg&quot;,&quot;png&quot;,&quot;gif&quot;,&quot;zip&quot;]"></div></div>

输入字段的图像“图像上传图库”

是jQuery/javascript：

/*testing second image capture for the gallery field */ 
    var file_holder2 = jQuery(".formBody input:file").on('change',function (e) {
        var file, img;
        var widescreen = 16/9; 
        var standard = 4/3;
        
        console.log('image upscript script is active value of file is: '+jQuery('input[type=file]').val());
            if ((file = this.files[0])) {
                //alert('filesize is'+file.size);
                img = new Image();
                img.onload = function () {
                 var userRatio = this.width / this.height;
                 if(userRatio == widescreen && this.width > 600 && file.size < 1002400)//make sure image is 16/9, width less than 600 px & filesize less than 1mb
                 {
                    //all is ok and it can be uploaded.
                 }else{
                    alert("Please make sure your image is:\n 1: Landscape (16:9 ratio).\n 1024px x 768px is recommended (jpeg or PNG)\n 2: No more than 1mb in size.\n 3: Width must be 600px minimum.\n\n Please try again with another image \filename is :"+this.value);
                     //jQuery(this).closest('div').remove();
                     //jQuery(this).hide();
                    //file.value='';
                     file_holder2.val('');
                     //file_holder2.value = '';
                     //jQuery(this).val('');
                    //this.files[0].value='';
                     //this.value=null;
                 }                          
                };
                img.src = _URL.createObjectURL(file);
        }
    }); 

下面 位于DOC就绪功能中。

以上脚本适用于第一文件字段。但是当添加第二秒时。脚本没有开火。

当我将第二个参数“ rsform-upload-box”添加到“ on”更改函数时，如下所示：

var file_holder2 = jQuery(".formBody input:file").on('change','rsform-upload-box',function (e) {

脚本不会触发。

因此，只需要知道我需要的内容即可将任何新添加的输入值设置为null。