jQ live用法
我们给元素绑定单击事件。用得最多的都是$("#id").click(function(){});
但我们动态添加的元素。这样绑定是不行的。必须借助live $("#id").live("click",function(){})
这是一个鼠标移入和移除事件。
$("#tabs li").hover(function () {
$(this).addClass("ui-state-hover");
}, function () {
$(this).removeClass(" ui-state-hover");
});
用live我们可以这样写
//绑定鼠标移入 移除事件
$("#sortable li").live({ mouseenter: function () {
}, mouseleave: function () {
}
});
如果你的代码没错。可就是不执行。那你要考虑你的脚本不支持。我试过1.4.1的就不支持。最后换成了。1.7.1
不过:live方法是旧版本的jquery才有(jquery1.9以前),on方法只能使用在页面上已有的标签;
想获取未来元素,只能用delegate方法了,具体写法如下:
比如:给动态添加的input添加click事件
可以这样写:
写法1:
$("body").delegate("#ck", "click", function () {
alert("delegate");
});
写法2:
$("#show").delegate("#ck", "click", function () {
alert("delegate");
});
写法3:
$("#show").delegate("input", "click", function () {
alert("delegate");
});
当然。也可以绑定多个事件,用委托链
$("#show").delegate("input", "mouseenter", function () {
alert("进入");
}).delegate("input", "mouseout", function () {
alert("离开");
});
或者用官方文档提示:
$(selector).delegate(childSelector,event,data,function)
event 规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
$("#show").delegate("#ck", {
"mouseenter": function () {
alert("进入");
}, "mouseout": function () {
alert("离开");
}
});
自定义事件
$("#show").delegate("#ck", "myCustom", function (a,arg1) {
alert("自定义事件" + arg1);
}); $("#btn").click(function () {
$("#show").html("<input type='button' name='name' value='动态添加的input' id='ck' />");
});
$("#btn2").click(function () {
$("#ck").trigger("myCustom",); //触发事件
});
有绑定事件。那么肯定有一个解绑事件:undelegate 是解绑事件
//单个
$("#add").click(function () {
$("body").delegate("#shows","click", showA);
});
$("#remove").click(function () {
$("body").undelegate("#shows", "click", showA);
}); //多个
$("#add").click(function () {
$("body").delegate("#shows", {
"click": showA,
"mouseout": showB
});
});
$("#remove").click(function () {
$("body").undelegate("#shows", {
"click": showA,
"mouseout": showB
});
}); function showA()
{
alert("delegate1");
}
function showB()
{
alert("delegate2");
}
<input type="button" name="name" value="添加事件" id="add" />
<input type="button" name="name" value="解绑事件" id="remove" />
<input type="button" name="name" value="显示事件" id="shows" />
不过这样。你单击2次 “添加事件”则会添加两次showA ,单击100次就添加100次。为了解决重复添加事件
在添加事件前。先取消(我还没有找到更好的方法)
//单个
$("#add").click(function (e) {
$("body").undelegate("#shows", "click", showA); //绑定前先取消绑定事件
$("body").delegate("#shows", "click", showA);
});
$("#remove").click(function () {
$("body").undelegate("#shows", "click", showA);
});
jQ live用法的更多相关文章
- jq命令用法总结
原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 如果说要给Linux文本三剑客(grep.sed.awk)添加一员的话,我觉得应该是jq命令,因为jq命令是用来处 ...
- jq 部分用法
这几天一直在写前台,因为jq是在客服端处理数据的,所以公司,一般都用这种方法,下面是我这几天用到的一些东西 1.修改table表格的第一轮显示值 function changeTableRowValu ...
- jq each 用法以及js与json互转
$(function(){ var json = '[{"id":"1","tagName":"apple"},{&qu ...
- jQ $.extend用法
$.extend()函数 1.用将一个对象或多个对象的内容合并到目标对象, 2.如果多个对象具有相同的属性,则后者覆盖前者的属性值. 例子: var object1={ apple:1, banana ...
- JQ初学总结一
Jquery是最火的JavaScript库,大部分web开发都会用到就jquery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知. 普通的javascript的缺点是:每种控件的操作方 ...
- 一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
- kissy小记
<script> KISSY.add('demo',function(S ,require, exports, module){ var Node = require('node'); v ...
- selenium span[contains]中使用变量
province = '湖南' driver.find_element_by_xpath('//span[contains(text(),"'+province+'").click ...
- jq和js用法:入口写法
jq和js入口写法demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
随机推荐
- dyld: DYLD_ environment variables being ignored because main executable (/usr/bin/sudo) is setuid or setgid
这两个变量被设置了 DYLD_LIBRARY_PATH *或* LD_LIBRARY_PATH, 用下面的明令查找一下,一般在.bash_profile, .bashrc 等文件中.执行brew do ...
- VC++ 学习笔记2 列表框添加字符串
向列表框添加字符串 现在知道两种方法 方法一:直接在需要添加内容地方输入下面代码 IDC_LIST1为需要添加列表框的ID号 改为你的 ((CListBox*)GetDlgItem(IDC_LIST ...
- python nose测试框架中使用allure_report框架
在使用nose自带的xunit生成xml文件生成测试报告后,领导说报告不够炫,没有百分比效果,且在web自动化时的截图不美观,html很多情况下没有显示图片(nose框架截图方法这里),正好,allu ...
- Android ScrollView嵌套ScrollView滚动的问题解决办法
引用:http://mengsina.iteye.com/blog/1707464 http://fenglog.com/article.asp?id=449 Android ScrollView嵌套 ...
- 高斯混合模型Gaussian Mixture Model (GMM)
混合高斯模型GMM是指对样本的概率密度分布进行估计,而估计采用的模型(训练模型)是几个高斯模型的加权和(具体是几个要在模型训练前建立好).每个高斯模型就代表了一个类(一个Cluster).对样本中的数 ...
- PowerDesigner 把Comment/name 互转
转载:https://www.cnblogs.com/cxd4321/archive/2009/03/07/1405475.html 在使用PowerDesigner对数据库进行概念模型和物理模型设计 ...
- Linux下 磁盘扩容的两种方式
Hadoop扩容 概述 Hadoop存储容量或计算能力不能满足日益增长的需求时,就需要扩容. 扩容有两个方案: 1) 增加磁盘 2) 增加节点 方案一:扩大虚拟磁盘 扩大容量 将虚拟的Linux关闭, ...
- windows10下笔记本电脑外接显示器设置
笔记本屏幕小,故外接一个显示器,方便使用. 我的电脑没有VGA接口,有HDMI接口,所以我买了一个HDMI到VGA接口转换器. 直接把外界显示器安装到笔记电脑上,如下图所示 接下来是屏幕设置 打开系统 ...
- UESTC 1059 - 秋实大哥与小朋友
题目链接:http://acm.uestc.edu.cn/#/problem/show/1059 Time Limit: 3000/1000MS (Java/Others) Memory Li ...
- python3学习笔记(3)_dict-set
# !/usr/bin/env python3 # -*- coding:utf8 -*- #dict 和 set #dict dictionary 用于存放 键值对的, 无序,key 不可变 #姓名 ...