Button not displaying menu

问题

About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.

my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:

https://codepen.io/anon/pen/bWaYzJ

<label> Uploads
  <label for="exampleFileUpload" class="button">Upload File</label>
  <input type="file" id="exampleFileUpload" class="show-for-sr">
</label>

now if i detached the plugin from element then button works again.

回答1:

change your outer label to div seems to solve your problem like this codepen

<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>

回答2:

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

And make your javascript:

$(document).ready(function(){
    $('#exampleFileUpload').onClick({
        MultiFile();
    });
});

回答3:

First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).

Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):

<div> Uploads
  <label class="button">Upload File
    <input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
  </label>
</div>

来源：https://stackoverflow.com/questions/43860148/button-not-displaying-menu