Question

I have the following javascript code which appends a input element in a div. This works in firefox, chrome and IE9 compatibility mode, however it does not work in IE9.

function add(){
    $(document).ready(function(){
        $(".lbl").append("<div>Bild (400x400px)<br/><input type='file' name='upload[]' id='upload[]' onChange='add()' /><br/>Bild beskrivning:<br/><textarea name='imgdesc[]'></textarea></div>");
    });
}
window.load(add());

This is the html code where the appending is being done, it is located inside a form, inside a table td

<tr><td colspan="2">
    <div class='lbl'></div>
</td></tr>
<tr><td>
    <input type="submit" name="newobject" value="Spara och granska">
</td></tr>
</table>

Any ideas on how to make this work in IE9?

Answer 1

Try it like this

$(document).ready(function() {
     $(window).load(add());
});

function add() {
    $(".lbl").append("<div>Bild (400x400px)<br/><input type='file' name='upload[]' id='upload[]' onChange='add()' /><br/>Bild beskrivning:<br/><textarea name='imgdesc[]'></textarea></div>");
};

http://jsfiddle.net/sBVam/3/

It looks like IE9 doesn’t support the load method as the error below shows up in the console

SCRIPT438: Object doesn’t support property or method ‘load’
show, line 25 character 1

You can use jQuery’s load method by making window a jQuery object. Or you can use .onload method with the native window Dom Object.. ie. window.onload()