从jQuery AJAX调用返回的HTML行为很奇怪

Question

I have some HTML that is echoed out by my PHP form handler script. The call made is an AJAX call, here is the jQuery AJAX call.

$(function() {
    $('#file').bind("change", function() {
        var formData = new FormData();
        //loop for add $_FILES["upload"+i] to formData
        for (var i = 0, len = document.getElementById('file').files.length; i < len; i++) {
            formData.append("file" + i, document.getElementById('file').files[i]);
        }

        //send formData to server-side
        $.ajax({
            url: "file-upload.php",
            type: 'post',
            data: formData,
            dataType: 'html',
            async: true,
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            success : function(data) {
                alert('success!!');
                $('#upload-result')[0].html(data);
            },
            error : function(request) {
                alert('error!!');
                console.log(request.responseText);
            }
        });
    });
});

I am getting a weird error:

TypeError: undefined is not a function

So I place a breakpoint in my success call, and here is the result in the Chrome Console:

As you can see, my div element that I am targeting exists! my data returned is also present! So why can't I append that to the div element #upload-result ?

Answer 1

When you index a jQuery collection, you get the underlying DOM element. .html() is a jQuery method, not a DOM method. It should be:

$('#upload-result').html(data);

or:

$('#upload-result')[0].innerHTML = data;