zoukankan      html  css  js  c++  java
  • 使用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的标签进行事件的绑定!

    这样就达到我的目的!

  • 相关阅读:
    日本自然科学研究机构生理学研究所:研究显示古典音乐有助治疗突发性耳聋(转)
    苹果新专利:视频通话不怕掉帧(转)
    三步解决EntityFramework Code First中的MissingMethodException错误
    Unity3D去掉全屏时的屏幕黑边
    WindowsPhone-GameBoy模拟器开发六--[转]指令系统实现必读:补码
    WindowsPhone-GameBoy模拟器开发五--使用XNA初略实现Gameboy显示系统
    WindowsPhone-GameBoy模拟器开发四--Gameboy显示系统分析
    python继承初始化对象实例时 TypeError: module() takes at most 2 arguments (3 given)
    python __getattr__和__getattribute__ 区别
    python – 将列表拆分为较小的列表
  • 原文地址:https://www.cnblogs.com/scgw/p/1971888.html
Copyright © 2011-2022 走看看