今天有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. zippo打火机的特点:

    1.  耐寒.零下30多度环境下仍然能打火 2.抗压.被1.5吨的汽车压过之后仍然能打火 3.抗风,在7级下面的风速中火焰都不会熄灭 4.防水,放入水中.取出来之后任然能打火

  2. 【Nginx】模块化设计

    高度模块化的设计是Nginx的架构基础.全部模块都是以ngx_module_t结构体表示,该结构体内部定义了7个回调方法.它们负责模块的初始化和退出.commands成员是一个包括有ngx_comma ...

  3. Html5笔记 表格 布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. gradle打包android (实现外部导入签名文件、多渠道打包、导入ant脚本)

    近期一直在做android自己主动打包,之前已经完毕了用纯命令行的形式打包.原生态ant脚本打包.和基于android的SDK的打包.而且实现了多渠道打包,后来同事推荐了gradle,网上的资料说gr ...

  5. 自己定义控件-仿iphone之ToggleButton&amp;VoiceSeekBar

    由于项目中须要使用开关切换button,和声音滑动控件,可是原生Android5.0版本号以下的控件实在是太挫了.尽管网上已经有非常多关于这两个控件的blog.可是我实在是找不到像iPhone这样简洁 ...

  6. RCF:一个相当不错的C++分布式RPC框架

    RCF(远程调用框架)是一个可以移植的C++进程间通信框架,使用C++语言特性,提供了一个简单高效的编写分布式C++软件的途径.RCF利用编译时多态清晰分开了接口和实现. 和传统的RPC框架如CORB ...

  7. 协议-网络-安全协议:SSH(安全外壳协议)

    ylbtech-协议-网络-安全协议:SSH(安全外壳协议) SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立 ...

  8. AMQP server localhost:5672 closed the connection. Check login credentials: Socket closed

    2016-04-13 09:23:38.755 18850 INFO oslo.messaging._drivers.impl_rabbit [req-fafc8542-9403-4b5a-89d2- ...

  9. leetcode矩阵与动态规划相关

    目录 54/59螺旋矩阵 62不同路径 64最小路径和 120三角形最小路径和 695岛屿的最大面积 547朋友圈 718最长重复数组 221最大正方形 121/122/123/714/188买卖股票 ...

  10. Blue Jeans(串)

    http://poj.org/problem?id=3080 寻找最长公共子串..暴搜的.. #include<stdio.h> #include<string.h> int ...