今天有get到一个新知识点,就是当我们向页面添加新的元素之后,加载之前的函数方法就对新元素失效了,下面我来说说如何解决这个问题的?

  我先看jq api文档没有找到方法,无果只好到网上找些资料,果然找到live方法。

  其实很简单:

  

  1.这是项目要求达到的效果,当我没用live事件,只用了简单的hover事件时:hover事件没有加载进来,没有我想要的边框效果,效果图如下

  /*经过用户技能标签增加样式*/
    $(function(){   

      $(".s-edited").hover(function(){  

        $(this).toggleClass("borderd");

      })

    })  

    2.当我用了live之后,效果达到了,如下图:

   

    代码如下:

    /*经过用户技能标签增加样式*/
    $(".s-edited").live("hover",function(){
      $(this).toggleClass("borderd");
    })

    我仔细的看了一下关于live的介绍,

    给所有当前以及 将来 会匹配的元素绑定一个事件处理函数(比如hover事件)。也能绑定自定义事件。
    
    PS:我是新手菜鸟,大神勿喷!

Jquery向页面append新元素之后,如何解决事件的绑定问题?的更多相关文章

  1. 解决Jquery向页面append新元素之后事件的绑定问题

    /*经过用户技能标签增加样式*/ $(".s-edited").live("hover",function(){ $(this).toggleClass(&qu ...

  2. 【WEB】jQuery获取页面回滚或跳转事件

    1.效果: 2.Jquery: //记得引入jquery.min.js <script type="text/javascript"> $(function(){ wi ...

  3. 用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  4. jquery在页面加载完成后再append的元素事件无效问题

    最近遇到一个问题,jquery在页面加载完成后再append的元素,append元素上有onclick事件,但是在append的元素上怎么点击都不会触发onclick事件.就如: <ul cla ...

  5. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  6. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  7. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  8. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  9. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

随机推荐

  1. 动态加入的HTML的自己主动渲染

    这两天在写一个用EasyUI的前台,遇到动态向Layout加入HTML内容时没有自己主动渲染的问题.查了一下网上的资料后得以解决.详细例如以下: $("#content").htm ...

  2. springmvc mybatis 分页插件 pagehelper

    springmvc mybatis 分页插件 pagehelper 下载地址:pagehelper 4.2.1 , jsqlparser 0.9.5 https://github.com/pagehe ...

  3. C++开发人脸性别识别总结

    历时一个月,最终在昨天把<C++开发人脸性别识别总结>系列博客完毕了,第一篇博客发表在2015年12月29日,截止昨天2016年2月29日最后一篇完毕,去除中间一个月的寒假,正好一个月,首 ...

  4. 浅析android适配器adapter中的那些坑

    做项目中遇到的,折磨了我将近两天,今天把经验分享出来.让大家以后少走点弯路,好了.简单来说一下什么是android的适配器,怎样定义.怎样添加适配器的重用性.怎样去减少程序的耦合性 适配器顾名思义是用 ...

  5. WCF学习笔记——配置服务引用

    WCF传过来的东西要序列化. 比如,在WCF服务中,象这么个方法 public IEnumerable<UserItem> GetUserList() 默认情况下,在客户端会调用,是这样: ...

  6. oc29--property修饰符

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject /* 如果给一个属性同时提供了g ...

  7. 洛谷 P1032 [ NOIP 2002 ] 字串变换 —— 字符串+bfs

    题目:https://www.luogu.org/problemnew/show/P1032 字符串好复杂...先写了个 dfs ,RE一个点TLE一个点,不知该怎么改了... #include< ...

  8. PCB 全景图技术实现

    为了对3D模型理解更透,这里采用threejs(WebGL第三方库)实现,刚开始学习入门,为了能看明白基本上每行代码都注释. 如果仅仅是为了实现全景图,可以用photo-sphere-viewer.j ...

  9. 原生JS---7

    原生js学习笔记7——本地存储之cookie操作 什么是cookie • 用来保存页面信息的,如用户名.密码 • cookie的特性:同一个网站中所有的页面共享一套cookie:数量.大小限制:过期时 ...

  10. Redis(二)-Win系统下安装

    下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们下载 Red ...