Jquery attr function not working in IE 9
Question
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.
1 answers
solution1
8 ACCPTED 2014-09-26 10:22:00
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));
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.