今天有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. LinkedList,ArrayList末尾插入谁效率高?

    废话不多说,原因不解释.上測试代码: package com.letv.cloud.cdn.jtest; import java.io.IOException; import java.util.Ar ...

  2. ORACLE错误1033出现和ORA-00600错误解决的方法

    非法关机以后.Oracle数据常常出现这个错误: EXP-00056:ORACLE错误1033出现 ORA-01033:ORACLE initialization or shutdown in pro ...

  3. String字符串方法具体解释

    Java开发中,基本都会用户String,有些时候忘记了它还有某一个方法,或者曾经没有使用到.而这些方法可能会节约非常多时间.自己为了学习这些方法,决定对部分測试一下. 定义:String=" ...

  4. luogu1991 无线通讯网

    题目大意 国防部计划用无线网络连接若干个边防哨所.2 种不同的通讯技术用来搭建无线网络:每个边防哨所都要配备无线电收发器:有一些哨所还可以增配卫星电话.任意两个配备了一条卫星电话线路的哨所(两边都ᤕ有 ...

  5. PCB 周期计算采用 SQL 函数调用.net Dll 标量函数 实现

    PCB 周期计算采用 SQL函数调用.net Dll实现 (实现代码重用目的) 玩过SQL SERVER数据库经常经需要写存储过程,函数之类的,当业务逻辑过于复杂,用SQL去写简直是恶梦, 这里以PC ...

  6. Linux<小白>详细笔记

    目录   应放置的内容 /bin  系统有很多放置执行文件的目录,但是/bin目录比较特殊./bin放置的是在单用户维护模式下还能够被操作的命令.在/bin下面的命令可以被root与一般用户使用. / ...

  7. HTML+CSS+JS总结

    ==================HTML(超文本标记语言)========== <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.此标签可告 ...

  8. SPOJ GSS1 & GSS3&挂了的GSS5

    线段树然后yy一下,搞一搞. GSS1: 题意:求最大区间和. #include <cstdio> #include <algorithm> using namespace s ...

  9. A - High School: Become Human

    Problem description Year 2118. Androids are in mass production for decades now, and they do all the ...

  10. 基于NPOI的扩展

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using NPOI.HSS ...