问题描述
w3c标准要求我们做到结构与行为分离；在jsp里面我们用<logic:notEmpty name="PRODUCT_COL" scope="request"> <logic:iterate id="PRODUCT_VO" indexId="ind" name="PRODUCT_COL" scope="request"><bean:write name="ind" /> <br> <a onclick="javascript:viewProduct('<bean:write name='PRODUCT_VO' property='productId' />')"> <bean:write name="PRODUCT_VO" property="productCode" /></a><br></logic:iterate></logic:notEmpty>来迭代数据，如果把a标签里面onclick方法分离出来，那么方法里面的参数将如何获取？
解决方案
html上只存数据，再用JS监听父容器，进行代理监听click事件，根据点击的节点来取数据。将数据存于data:id中（data为namespace，防止冲突）<div id="dom_ct"><logic:notEmpty name="PRODUCT_COL" scope="request"><logic:iterate id="PRODUCT_VO" indexId="ind" name="PRODUCT_COL" scope="request"><bean:write name="ind" /> <br> <a data:id="<bean:write name='PRODUCT_VO' property='productId' />"> <bean:write name="PRODUCT_VO" property="productCode" /></a><br></logic:iterate></logic:notEmpty> </div>jQuery示例，这里简单的进行了代理，只监听父容器（因为事件会冒泡）var ct = $("dom_ct");ct.click(function(e){if($(e.target).is("a[data\:id]"){viewProduct(e.target.getAttribute("data:id");}});上面的代码不能处理a标签有子节点的情况，加强版：var ct = $("dom_ct");ct.click(function(e){var dom = e.target;while(dom && dom!==e.currentTarget){if($(dom).is("a[data\:id]")){console.log(dom.getAttribute("data:id"));break;}else{dom = dom.parentNode;}}});