javascript - Very strange behavior with if data-bind and file upload -

i noticed strange things happening on page use knockout power. here's situation:

    <div class="col-md-4">         <h3 class="">upload document</h3>         <form id="document-form">             <span class="form-group">                 <input type="file" name="files" value="upload" multiple="" id="input-file" style="display: none;" data-bind="event:{change: uploadfiles}" />                 <label for="input-file" class="btn btn-default">select files</label>             </span>         </form>     </div> 

this little area post file server whenever user added files. code uploadfiles looked this.

    //formnode passed viewmodel @ time of instantiation, ,     //the dom node represents <form></form> element     self.uploadfiles = function() {         self.showloading(true);         event.preventdefault();          var formdata = new formdata($(formnode)[0]);          $.ajax({             url: someurl,             type: 'post',             data: formdata,             async: true,             cache: false,             contenttype: false,             processdata: false,             success: somefunction         });     }; 

so worked well. then, added if data-bind whole thing so:

    <div class="col-md-4" data-bind="if: userhaspermission">         <h3 class="">upload document</h3>         <form id="document-form">             <span class="form-group">                 <input type="file" name="files" value="upload" multiple="" id="input-file" style="display: none;" data-bind="event:{change: uploadfiles}" />                 <label for="input-file" class="btn btn-default">select files</label>             </span>         </form>     </div> 

now user (assuming have permission) can see upload form , can choose file upload, uploadfiles function materializes nothing in formdata variable , consequently, nothing empty, nameless file gets posted server.

any ideas why happening? there can mitigate this?

the problem formnode not exist @ "instantiation" when use if: binding. html in if: binding block not generated knockout until userhaspermission true. if userhaspermission changed false, html removed dom.

with visible binding, html there, hidden.

so, fix this, can continue use visible binding noted in comment or can change upload files function dom element each time:

var formdata = new formdata($('#document-form')[0]); 

or whatever form id is.