Jquery attr函数在IE 9中不起作用

时间:2014-09-26 10:18:54

标签: javascript jquery html internet-explorer

找到下面的代码。我想在IE中使工作具有相同的功能。我正努力让它在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的attr()函数似乎不能在IE 9中运行。或者我尝试了这个remove.onclick = function(){removeBarColor(color)};这似乎也不适用于IE9。

希望我的问题很清楚。感谢您的期待。

1 个答案:

答案 0 :(得分:8)

我假设您正在讨论此attr行:

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

无论它是否在其他地方工作,如果你正在使用jQuery(或者甚至,坦率地说,如果你不是),不要像这样挂钩事件处理程序;使用现代技术连接处理程序,尤其是因为使用你已经使用的lib非常容易:

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

依赖于ES5的Function#bind(可以填充);或者,您可以使用jQuery的proxy

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

Live Example

无论哪种方式,该代码所做的是创建一个新函数,在调用时,会调用removeBarColor作为color参数传递index(并设置this特别没有;好吧,好吧,在宽松模式下它将是window,在严格模式下它将是null)。然后它将该函数指定为click处理程序。

另一种方法是保存元素上的颜色,然后通过查看单击的元素使removeBarColor起作用,但上面是最小模型方法。