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的标签进行事件的绑定!

    这样就达到我的目的!

  • 相关阅读:
    BZOJ 1070 修车
    BZOJ 1927 SDOI2010 星际竞速 最小费用最大流
    LOJ 2321 清华集训2017 无限之环 拆点+最小费用最大流
    EZOJ 宝石迷阵 建图+网络流匹配
    BZOJ 1711 吃饭dining/Luogu P1402 酒店之王 拆点+最大流流匹配
    POJ 1637 Sightseeing tour 建图+网络流
    POJ 1149 PIGS 建图,最大流
    【2018 1月集训 Day1】二分的代价
    【2019 1月集训 Day1】回文的后缀
    20181228 模拟赛 T3 字符串游戏 strGame 博弈论 字符串
  • 原文地址:https://www.cnblogs.com/scgw/p/1971888.html
Copyright © 2011-2022 走看看