jQuery事件未与IE8一起触发

Question

I'm using blueimp's fileupload javascript widget and jQuery 1.9.0 for uploading files to a server and I have an event not being triggered in IE8, which is one of the required browsers for my project.

So because of this I can never open the window for browsing for the files. If I do a $('#fileupload').click() from the IE8 console, it works, but I didn't success in the code.

I think this is happening because of the bubbling of the event, but I'm showing you the code for deciding for yourselves. I think also that styles are importante to this issue because maybe the styled button I'm using over the real fileupload widget must be overlapping it. Maybe css styles like opacity and position matter.

Html:

<form id="supportForm">
    <div class="formTable">
        <div class="formRow">
            <label>User:</label>
            <input name="user" type="text" class="form-control validate[required]" placeholder="John Smith">
        </div>

        <div class="formRow">
            <label>Phone:</label>
            <input name="phone" type="tel" class="form-control validate[required]" placeholder="Ej: 881243989">
        </div>

        <!-- ... -->
        <!-- Some inputs and stuff -->
        <!-- ... -->

        <div class="formRow">
            <label>Attached files:</label>
            <div class="formCell">
                <span class="btn btn-default fileinput-button">
                    <span>Browse</span>
                    <input id="fileupload" type="file" name="files[]" data-url="../server/upload.html" class="submitFilesButton" multiple="">
                </span>
            </div>
        </div>
        <div class="formRow">
            <label></label>
            <div id="additional" class="formCell">
            </div>
        </div>
        <div class="formRow">
            <label></label>
            <div class="formCell">
                <button id="remedyButton" type="submit" class="btn btn-primary">Send</button>
                <button id="resetButton" type="reset" class="btn btn-default">Clean</button>
            </div>
        </div>
    </div>
</form>

Javascript:

$(document).ready(function() {
    upload_comp = $('#fileupload')
            .fileupload({ // Widget options
                singleFileUploads : false,
                autoUpload : false,
                dataType : 'json'
            })
            .on("fileuploadadd",
                function(e, data) { // Function for adding files after opening the browse window
                    if (data.files.length > 0) {
                        $('input[type=file]').css('color', 'transparent');
                    }

                    // Creating divs for the selected files in the previous browse window
                    for ( var i = 0; i < data.files.length; i++) {
                        var name = $('<div></div>').text(data.files[i].name);
                        var icon = $('<span class="fa fa-2x fa-trash" data-toggle="tooltip" data-placement="bottom" title="Delete">');
                        icon.click(function() {
                            // This handler creates a button for removing the actual file
                            for ( var k = 0; k < fileList.length; k++) {
                                if (fileList[k].name == $(this).parent().text()) {
                                    fileList.splice(k, 1);
                                    break;
                                }
                            }
                            $(this).parent().remove();
                        });

                        fileDiv = $('<div class="item">').wrapInner(name).append(icon);
                        fileDiv.appendTo($('#additional'));
                        fileList.push(data.files[i]);
                    }
                    //createTooltip($('.fa-trash'));
                });

    if (isNavigator(CONSTANTS.BROWSER.IE8)) {
        // Maybe could use something here and force the click()
        // But my current solution creates an infinite loop
    }
});

Css:

/* These are specifically for IE8 and are located in ie8.css */
DIV.formRow > * {
    width: auto;
}

INPUT[type=file] {
    display : none;
}

/* These are for all browsers in another css file, also for IE8 when there is no rule in the previous file */

.formTable {
    border-spacing:1em;
    display: table;
    width: 45em;
    min-width:45em;
    margin: 0 auto;
}

div.formRow {
    display: table-row;
}

div.formRow > label, #additional {
    width: 35%;
}

div.formRow > * {
    display: table-cell;
    width: 100%;
}

div.formCell {
    display: table-cell;
    width: 100%;
}

#fileupload {
    float:left;
    top: 0;
    right: 0;
    left: 0;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: initial;
}

.item {
    border: 1px;
    border-color: black;
    border-style: solid;
    border-radius: 5px;
    border-width: thin;
    display: inline-block;
    padding: 4px;
    margin:0.25em;
}

.item div {
    vertical-align:text-bottom;
    display: inline;
}

.fa-trash {
    margin-left: 1em;
    cursor:pointer;
    color: #428BCA;
}

#company {
    display: inline-block;
    width: 49%;
}

#warehouse {
    float:right;
    width: 49%;
    display: inline-block;
}

.submitFilesButton {
    opacity:0;
    position:absolute;
}

.fileinput-button {
    text-align:center;
    white-space: nowrap;
    position: relative;     
}

#resetButton, #remedyButton {
    margin: 0.4em;
    float:right;
}

label {
    vertical-align:top;
}

Answer 1

This has been open long enough. It looked like @Sampson was right and IE8 didn't support the JS API for files.