blueimp/jQuery-File-Upload & jquery tree traversal methods on input element

I'm trying to implement file uploading with the help of https://github.com/blueimp/jQuery-File-Upload and have come across some weird behavior that I hope somebody can explain to me, or it might actually be a bug, I don't know.

I followed the minimal setup guide (https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin) and setup a new project where I change this (only the script):

<body>
<input id="fileupload" type="file" name="files[]" multiple>
</body>

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>

to this (to illustrate the issue I have). I introduce a variable and assign $('#fileupload') to it and work with the variable from there on:

<script>
$(function () {
    var $elem = $('#fileupload');
    $('#fileupload').fileupload({
        dataType: 'json',
            done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
    $elem.on('change', function(e) {
        console.log($elem.parent());
        console.log($elem.next());
        console.log($elem.prev());
        console.log($elem.siblings());
    });
</script>

Int the second example for some reason jQuery's tree traversal methods like parent(), next(), prev() or sibling() won't work with

$elem

any more after clicking the input button and loading some random image. Is this a bug or am I simply missing something here?

thx for the help

Solution

So yeah, the simple answer is, that the file input field is replaced with a clone after each input field change event. This is required for iframe transport queues and allows change events to be fired for the same file selection.