Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
我在页面上有约400个元素,这些元素具有关联的单击事件(4种不同类型的按钮,每个按钮具有100个实例,每种类型的单击事件执行相同的功能,但参数不同)。
我需要最大程度地减少对性能的影响。通过将单击事件分别绑定到每个事件(使用JQuery的
为澄清起见进行编辑:):
我实际上有一个表(使用JQGrid生成),每行都有数据列,后跟4个图标"按钮"列-删除
因为您不仅需要带有一些容器对象的常规解决方案,而且还需要jqGrid的解决方案,我可以为您提供另一种方法。
问题是jqGrid已经建立了一些
您可以使用以下按钮来定义列
1 2 3 4 | { name: 'add', width: 18, sortable: false, search: false, formatter:function(){ return"<span class='ui-icon ui-icon-plus'></span>" }} |
在上面的代码中,我确实使用了jqGrid的自定义格式化程序,但没有任何事件绑定。
的代码
1 2 3 4 5 6 7 8 9 10 | beforeSelectRow: function (rowid, e) { var iCol = $.jgrid.getCellIndex(e.target); if (iCol >= firstButtonColumnIndex) { alert("rowid="+rowid+"\ Button name:"+buttonNames[iCol]); } // prevent row selection if one click on the button return (iCol >= firstButtonColumnIndex)? false: true; } |
其中
如果要始终选择按钮上的行,请单击以简化代码,直到执行以下操作
1 2 3 4 5 6 | onCellSelect: function (rowid,iCol/*,cellcontent,e*/) { if (iCol >= firstButtonColumnIndex) { alert("rowid="+rowid+"\ Button name:"+buttonNames[iCol]); } } |
以一种使用绑定到整个表的现有
我建议您还始终使用
您可以在此处查看演示。
已更新:您必须使用的另一个选择是
更新2:您可以在此处查看代码的更新版本。
您是否考虑过使用
1 2 3 4 5 | $('#container').delegate('.your_buttons','click',function(e){ e.preventDefault(); var your_param = $(this).data('something'); // store your params in data, perhaps do_something_with( your_param ); }); |
假定这样的总体布局:
1 2 3 4 5 6 | <!--- stuff here ---> Alpha Beta Gamma Omega <!--- hundreds more ---> |
您应该使用
对于不同的参数,可以对每个元素使用