在 Aurelia 对话响应中，jquery 不工作。

Question

我有一个输入文件，样式为 "display:none"，还有一个按钮，根据某种逻辑触发输入文件元素。一切正常，直到我必须打开一个对话框，在对话框内部，如果用户选择确定，我打开了输入文件对话框，但它不起作用。 ¿当用户已经在对话框中选择了答案时，我该如何实现？

<input type="file" style="display:none" class="file-input" id="files" 
ref="fileInput" change.trigger="processFile()"/>

<button type="submit" id="uploadButton" class="btn btn-default" 
click.delegate="openFileInput()" > Submit Selected </button>

 openFileInput()
 {
        if(somelogic){
            $("#files").click(); //here works cool
        }else
        {

            this.dialogService.open( {viewModel: Prompt, model: 'you  have alredy pickup a file, do you want t overrride it?',lock:false }).whenClosed(response => {                   
                 if (!response.wasCancelled) {   
                    $("#files").click();    //this not,             
                    setTimeout(() => {                       
                        $("#files").click();    //also if we wait, 3 seconds afther the dialog is closed.                    
                    },3000);
                    return;
                 } else {
                    console.log('cancelled');                    
                    return;
                 }
                 console.log('output ');                    
                 console.log(response.output);
              });
        }                  
 }

Answer 1

我不完全明白问题是什么，但是当调用 .whenClosed 的回调时，对话框已经分离（从 DOM 中删除）并且未绑定。如果标记在对话框中，那么您将必须在对话框 VM 中实现您的逻辑。

Answer 2

您可以尝试将 $("#files") 元素存储为变量，然后再对其调用任何函数。

const filesInput = $("#files")

然后执行以下操作：

 openFileInput()
 {
        const filesInput = $("#files");
        if(somelogic){
            filesInput.click();
        }else
        {

            this.dialogService.open( {viewModel: Prompt, model: 'you  have alredy pickup a file, do you want t overrride it?',lock:false }).whenClosed(response => {                   
                 if (!response.wasCancelled) {   
                    filesInput.click();             
                    setTimeout(() => {                       
                        filesInput.click();
                    },3000);
                    return;
                 } else {
                    console.log('cancelled');                    
                    return;
                 }
                 console.log('output ');                    
                 console.log(response.output);
              });
        }                  
 }

编辑： 我还建议使用 Aurelia 绑定而不是 JQuery。如果将 ref="files" 添加到 HTML 元素，然后将字段 public files: HTMLElement 添加到视图模型，则无需使用 JQuery.[=17 即可在方法中引用该元素=]

编辑 2: 如果这对你不起作用，请尝试使用以下而不是 display: none:

隐藏元素

height: 0;
overflow: hidden;
visibility: hidden;
width: 0;

在 Aurelia 对话响应中，jquery 不工作。

Inside Aurelia Dialog response, jquery is not working.

jquery

aurelia