使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听

  插入html代码后要重新绑定事件

近日工作当中,需要对由jquery动态生成的标签添加一些事件效果。

最初的做法是在页面载入时调用事件监听如下:

Js代码 复制代码 收藏代码
  1. $(document).ready(function(){   
  2.            $("a.keyWord1").hover(   
  3.                     function(){   
  4.                       $(this).css("text-decoration","underline");   
  5.                       $(this).css("color","#fc9b3f");   
  6.                     },   
  7.                     function(){   
  8.                         $(this).css("text-decoration","none");   
  9.                         $(this).css("color","");   
  10.                     }   
  11.             );   
  12.         });  

 本意是,当鼠标移动到a标签时触发hover效果。但是最终一点发应也没有,当然以上的代码没有问题,我在其它地方是可以使用的。

后来对比了其它地方用到这段代码的标签,发现我当前的a标签是通过jquery动态生成的,而不是后台生成的,所以思考可能是由于jquery在页面加载绑定事件时,由于我的后来动态生成的a标签还不存在,所以事件绑定自然就不成立!当然一点反应也没有!

找到问题,就开始找解决方案:

方案如下(不是很完美)

在动态生成标签后,添加如下代码:

Js代码 复制代码 收藏代码
  1. $("a.keyWord1").bind("mouseover",function(){   
  2.           $(this).css("text-decoration","underline");   
  3.           $(this).css("color","#fc9b3f");   
  4.   
  5.        });   
  6.         $("a.keyWord1").bind("mouseout",function(event){   
  7.         //阻止事件冒泡   
  8.            event.stopPropagation();             
  9.           $(this).css("text-decoration","none");   
  10.           $(this).css("color","#06F");   
  11.             $(this).unbind();   
  12.        });  

上面的代码意思是,对a标签,且class=keyWord1的标签进行事件的绑定!

这样就达到我的目的!

原文地址:https://www.cnblogs.com/scgw/p/1971888.html