jquery .map is not working on IE 10

Question

I have this jquery code:

$("#tf_zoom").live("click", function () {
    var n = $(".tf_thumbs").find("img").attr("src");
    var modelid = n.substr(43);
    $.post("models/get_gallery", {
        "modelid": modelid
    }, function (data) {
        var imagespathes = $(data).map(function (key, url) {
            return ({
                href: '<?php echo base_url();?>assets/uploads/files/' + url
            });
        });
        console.log(imagespathes);
        $.fancybox.open(imagespathes);
    }, "json");
});

and this is my html:

<div id="tf_thumbs" class="tf_thumbs">
    <span id="tf_zoom" class="tf_zoom"></span>
    <img id="dynam" src="<?php echo base_url();?>assets/uploads/files/<?php echo $firstthumb;?>" alt="Thumb1"/>
</div>

Okay, now my problem is that this code is not functioning on IE 10 and surprisingly it's working like a charm on IE 9, IE 8, IE 7 besides FF and Google Chrome

I read many things about this issue but nothing worked for me. So, is there any solution for it. your help is really appreciated.

Update 1 : I am using jquery version 1.7

Answer 1

You should be using static map function for this:

$.map(data, function(obj, index){...})

See documentation here.

    // If data looks like this: [{ url: 'TestUrl' }]
    // This should work:

    var imagespathes = $.map(data, function(element){
        return { href: '<?php echo base_url();?>assets/uploads/files/' + element.url };
    });

Answer 2

Perhaps this hint will help you:

I have noticed that .map( $("select").get(0).options ) will not work in IE10 but .map( $("select:first >option") ) will. This is because in ie10 .options returns a select node with an iteration of options.

So see what data is returning in IE10, perhaps it too is not an array. And if so perhaps you can do something like $(new Array(data)).map(... which will satisfy all browsers