easyUI之为splitbuuton绑定事件

来源：互联网发布：php计算购物车总金额编辑：程序博客网时间：2024/06/02 11:17

通过easyUI可以很迅速的创建一个分割按钮，但是easyUI没有为splitbutton封装onClick事件，这里我们谈下如何为它添加单击事件。

第一种，在标签内添加onClick，如下：

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton" data-options="menu:'#mm',iconCls:'icon-ok'" onclick="show('OK')">Ok</a><div id="mm" style="width:100px;"><div data-options="iconCls:'icon-ok'" onclick="show('OK')">Ok</div><div data-options="iconCls:'icon-cancel'" onclick="show('error')">Cancel</div></div>

function show(name){alert(name);}

第二种，在标签内添加id或class，如下：

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton OK" data-options="menu:'#mm',iconCls:'icon-ok'">Ok</a><div id="mm" style="width:100px;"><div data-options="iconCls:'icon-ok'" class="OK">Ok</div><div data-options="iconCls:'icon-cancel'" class="Cancel">Cancel</div></div>

$(".OK").bind("click",function(){alert("OK")})$(".Cancel").bind("click",function(){alert("Cancel")})

以上两种方法都不可避免的存在一定缺陷，如第一种使用onClick，容易暴露自己的接口，使不法分子在外部直接修改我们的接口；第二种，过于死板，不能动动态增加的元素绑定事件。所以，我比较赞成使用下面这种方法，即通过事件委托添加事件。

第三种，事件委托，如下：

<a href="javascript:void(0)" id="sb" class="easyui-splitbutton OK" data-options="menu:'#mm',iconCls:'icon-ok'">Ok</a><div id="mm" style="width:100px;"><div data-options="iconCls:'icon-ok'" class="OK">Ok</div><div data-options="iconCls:'icon-cancel'" class="Cancel">Cancel</div></div>

$("#mm").bind("click",function(e){var classname = e.target.className;if(classname.indexOf("OK") > -1)alert("OK");if(classname.indexOf("Cancel") > -1)<span style="white-space:pre"></span>alert("Cancel");})

下面是经过easyUI解析后的html代码：

可以很明闲的发现，解析后的html与我们自己写的有很大的不同。

经过实验发现，在第三种方法中，将事件委托用与easyUI上一起使用时有bug存在，似乎是easyUI禁止了事件冒泡，有兴趣的同学可以深入探究下，互相交流。

0 0