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

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

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

$(document).ready(function(){
           $("a.keyWord1").hover(
                    function(){
                      $(this).css("text-decoration","underline");
                      $(this).css("color","#fc9b3f");
                    },
                    function(){
                        $(this).css("text-decoration","none");
                        $(this).css("color","");
                    }
            );
        });

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

 

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

 

找到问题，就开始找解决方案：

方案如下（不是很完美）

在动态生成标签后，添加如下代码：

$("a.keyWord1").bind("mouseover",function(){
          $(this).css("text-decoration","underline");
          $(this).css("color","#fc9b3f");

       });
        $("a.keyWord1").bind("mouseout",function(event){
        //阻止事件冒泡
           event.stopPropagation();          
          $(this).css("text-decoration","none");
          $(this).css("color","#06F");
            $(this).unbind();
       });

 

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

这样就达到我的目的！

评论

2 楼 amcucn 2009-06-26  

playfish 写道

jquery新版本有增加一个live函数，是jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。用liver函数应该就能解决你的问题了。

太好了，这正是我想要的！

1 楼 playfish 2009-06-25  

jquery新版本有增加一个live函数，是jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。用liver函数应该就能解决你的问题了。