简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release： 2016-05-16 16:09:16
Original
865 people have browsed it

　　我先看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：我是新手菜鸟，大神勿喷！

以上就是本文的全部内容了，希望大家能够喜欢。

Related labels：
append jquery
source：php.cn
Previous article：Javascript中的匿名函数与封装介绍_javascript技巧 Next article：Javascript中的方法链（Method Chaining）介绍_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Steps to install jQuery in Nuxt.js Although I try to add jQuery in my project, I get an error saying it's not defined. plugin...
From 2023-11-06 16:41:50
0
1
225
jQuery getting wrong value when getting data attribute I have a div with data attribute <divclass='p1'data-location='1'></div> I have...
From 2023-11-01 23:01:19
0
1
209
Support jQuery's Transfer-Encoding:chunked I'm a web developer. In my script I use header() to set "Transfer-Encoding:chunked&qu...
From 2023-10-25 23:44:37
0
1
230
How to get the natural dimensions of an image using JavaScript or jQuery? So far I have this code: varimg=document.getElementById('draggable'); varwidth=img.clientW...
From 2023-10-21 13:53:08
0
2
275
Automatically expand text area I'm trying to make a simple auto-expanding text area. This is my code: textarea.onkeyup=fu...
From 2023-10-21 08:49:23
0
2
225
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！