使用jQuery 模拟鼠标点击a标签事件 实现定位

时间:2022-12-22 21:33:36

在后台添加商品列表时发现列表过长不方便增加,便使用jQuery  模拟鼠标点击a标签事件 实现定

用jQuery trriger(“click”)模拟鼠标点击a标签事件时一定要在<a></a>里面加东西如果直接选择$("a").trriger('click')将不会有结果因为,我们平时单击<a>链接时实际上是单击了<a>里面的内容!

下面这个例子用到了freemarker 从服务器上加载商品列表到后台管理页面

cat_list.html文件

<script type="text/javascript" src="js/Cat.js"></script>
<div class="grid">
<div> 

           <input type="text" style="width:260px" id="href"/> <a href="" id="a" style="display:none"><span id="go">go</span></a>

           <input type="button" id="search" value="分类定位"/> 

</div>
<form>
<div class="toolbar">
<ul><li><a href="cat!add.do">添加分类</a></li></ul>
&nbsp;&nbsp;<span class="help_icon" helpid="goodscat"></span>
<div style="clear:both"></div>
</div>
<div id="cat_list">
<table>
<thead>
<tr>
<th width=200>名称</th> 
<th width=100>类型</th> 
<th width=100>排序</th> 
<th width=100>添加子</th>
<th width=100>编辑</th>
<th>删除</th>
</tr>
</thead> 
<tbody>
<#assign children=catList />
<#assign level=1 />
<#include 'list_children.html' />  
</tbody>
</table>
</div>
<div style="text-align:center">
 <input name="button" type="button" class="button" id="sortBtn" value="保存排序" />
</div>
</form>
<div style="clear:both;padding-top:5px;"></div>
</div>

/**定位jQuery**/
<script>
$(function(){
   $('#search').click(
 function(){ 
 var href=$("#href").attr("value");
 $("#a").attr("href","#"+href);
 $("#go").trigger("click");  
          }
    );
});
</script>

分类list_children.html文件 

<#list children as cat> 
<tr id="${cat.cat_id}" name="${cat.parent_id}" >
    <td style="padding-left:${(level+1)*40}px;font-weight: bold;">
    <!-- <#if cat.hasChildren>
    <img onclick="show(${cat.cat_id})" src="images/transparent.gif" class="add">
</#if> -->
<a name="${cat.name}"></a>/*****分类定位***/
${cat.name}
    </td>
    <td>${cat.type_name}</td>
    <td>
 <input type="hidden" name="cat_ids" value="${cat.cat_id }"/>
    <input type="text" name="cat_sorts" style="width:30px" value="${cat.cat_order }"/>
    </td> 
    <td><a href="cat!add.do?cat_id=${cat.cat_id}"><img src="images/transparent.gif" class="add"></a></td>
    <td><a href="cat!edit.do?cat_id=${cat.cat_id}"><img src="images/transparent.gif" class="modify"></a></td>
    <td>
    <a href="javascript:;" ><img src="images/transparent.gif" class="delete" catid="${cat.cat_id}"></a>
    
    </td>
</tr>
<#if cat.hasChildren>
<#assign level=level+1 />
  <#assign children=cat.children />
<#include 'list_children.html' />
  <#assign level=level-1/>
</#if>
</#list>