IE Doesn't support forEach even with Polyfill.
Another way to make IE9+ support forEach:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span class="demo">See me.</span>
<span class="demo">See me.</span>
<span class="demo">See me.</span>
<span class="demo">See me.</span>
<script>
// Function to make IE9+ support forEach:
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
// Works with Nodelists (i.e. HTMLcollections):
var demos = document.querySelectorAll('.demo');
demos.forEach(function(item) {
item.style.color = 'red';
});
// As well as with Arrays:
var gherkins = ['gher1', 'gher2', 'gher3'];
gherkins.forEach(function(item) {
console.log(item);
});
</script>
</body>
</html>Tested in IE11, and according to its emulate function, also works in 10 and 9 (not 8).
You are adding a prototype to the Array object and try to use it on a NodeList (which is what querySelectorAll returns instead of an array), that won't work. Make an Array out of the node List, or use
Array.prototype.forEach.call(document.querySelectorAll('[data-click]'), function (e) {
// your code
});