CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Vignesh Gopalakrishnan
Vignesh Gopalakrishnan

Reputation: 1992

Jquery attr function not working in IE 9

Find the code below. I would like to make work the same functionality in the IE. I am struggling to make it work on IE 9.

<html>
    <head>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        var colors= ["#99b433", "#00a300", "#1e7145"];
        $(document).ready(function(){
            addBarColor();
        });

        var addBarColor = function(){
            $('#lineColors').html("");
            for(var color=0; color<colors.length; color++){
                //Loading List of colors
                var chartBarColor = colors[color];
                var li = document.createElement('li');
                li.style.width = "50px";
                li.style.backgroundColor = chartBarColor;

                //Adding Remove button to it.
                var remove = document.createElement('span');
                remove.id = "remove"+color;
                remove.style.cursor="pointer";
                remove.style.marginLeft = "40px";

                //remove.onclick = function(){removeBarColor(color)};

                //Adding x image
                var removeImg = document.createElement('img');
                removeImg.src = "https://cdn1.iconfinder.com/data/icons/diagona/icon/10/101.png";

                //Appedning everything to UL
                remove.appendChild(removeImg);
                li.appendChild(remove);
                $('#lineColors').append(li);

                $("#remove"+color).attr('onclick', 'removeBarColor(\''+color+'\')');
            }
        }

        //Removing the color from the array
        var removeBarColor = function (index){
            alert(index);
            colors.splice(index, 1);
            console.log(colors);
            addBarColor();
        };
    </script>
    </head>
    <body>
        <ul id="lineColors">
        </ul>
    </body>
</html>

Jquery's attr() function doesn't seems to be working in IE 9. Alternatively I tried this remove.onclick = function(){removeBarColor(color)}; this also doesn't seems to be working in IE9.

Hope my problem is clear. Thanks for help in anticipation.

Upvotes: 2

Views: 473

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075735

I assume you're talking about this attr line:

$("#remove"+color).attr('onclick', 'removeBarColor(\''+color+'\')');

Whether it works elsewhere or not, don't hook up event handlers like that if you're using jQuery (or even, frankly, if you're not); hook up handlers using modern techniques, esp. as it's really easy with the lib you're already using:

$("#remove"+color).on('click', removeBarColor.bind(null, color));

That relies on ES5's Function#bind (which can be shimmed); alternately, you can use jQuery's proxy:

$("#remove"+color).on('click', $.proxy(removeBarColor, null, color));

Live Example

Either way, what that code does is create a new function that, when called, will call removeBarColor passing in color as the index argument (and setting this to nothing in particular; well, okay, in loose mode it'll be window, in strict mode it'll be null). Then it assigns that function as a click handler.

Another approach is to save the color on the element, and then have removeBarColor work by looking at the element that was clicked, but the above is the minimal-mods approach.

Upvotes: 8

Related Questions