各位大神谁能给我解释一下为什么我给easyUI的textbox添加清空按钮的时候会出现多个按钮


     源码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$.extend($.fn.textbox.methods, {
    addClearBtn: function(jq, iconCls){
        return jq.each(function(){
            var t = $(this);
            var opts = t.textbox('options');
            opts.icons = opts.icons || [];
            opts.icons.unshift({
                iconCls: iconCls,
                handler: function(e){
                    $(e.data.target).textbox('clear').textbox('textbox').focus();
                    $(this).css('visibility','hidden');
                }
            });
            t.textbox();
            if (!t.textbox('getText')){
                t.textbox('getIcon',0).css('visibility','hidden');
            }
            t.textbox('textbox').bind('keyup', function(){
                var icon = t.textbox('getIcon',0);
                if ($(this).val()){
                    icon.css('visibility','visible');
                } else {
                    icon.css('visibility','hidden');
                }
            });
        });
    }
});$(function(){
    $('#tt').textbox().textbox('addClearBtn', 'icon-clear');
    $('#tt2').textbox().textbox('addClearBtn', 'icon-clear');
    $('#tt1').textbox().textbox('addClearBtn', 'icon-clear');
}); 
</script>
</head>
<body>
   文本框：<input type="text" class="easyui-textbox" addClear id="tt"/><br/>
    文本框：<input type="text" class="easyui-textbox" addClear id="tt1"/><br/>
     文本框：<input type="text" class="easyui-textbox" addClear id="tt2"/> 
</body>
</html>

     效果图：
 

解决方案 »

  1.   

    不用自己写，1.5已经有icons配置了
    icons  array  The icons attached to the textbox. Each item has the following properties:
    iconCls: string, the icon class.
    disabled: boolean, indicate if the icon is disabled.
    handler: function, the function to process the clicking action on this icon.Code example:$('#tb').textbox({
    icons: [{
    iconCls:'icon-add',
    handler: function(e){
    $(e.data.target).textbox('setValue', 'Something added!');
    }
    },{
    iconCls:'icon-remove',
    handler: function(e){
    $(e.data.target).textbox('clear');
    }
    }]
    })
    Web开发学习资料推荐
    easyui开发技巧
    easyui datebox设置日期范围