jquery为动态添加元素添加事件
以前我们定义事件，比如为元素定义单击事件是这样写的：
$('input').click(function () {
//处理代码
$('.clickme').bind('click', function() {
// Bound handler called.
但是这只能是对已经加载好的元素定义事件，那些后来添加插入的元素则需要另行绑定。即使你使用jquery的clone函数，它并不能将事件也复制（到目前为止我还不清楚它是为什么这样定义，是没法复制还是刻意这么处理，以防止出现某些异常，这还有待去分析一下jquery的源代码）。
现在，使用live你可以轻松搞定，
$('.clickme').live('click', function() { // Live handler called. });这样，你即使在后面动态插入的元素，也会被绑定事件，$('body').append('&div class=&clickme&&Another target&/div&');
定义和用法
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
问题：使用jQuery的live()方法绑定事件，有时会出现重复绑定的情况，如，当点击一个按钮时，此按钮所绑定的事件会并执行n遍。
解决：使用die()方法，在live()方法绑定前，将此元素上的前面被绑定的事件统统解除，然后再通过live()方法绑定新的事件。
//先通过die()方法解除，再通过live()绑定
$(&#selectAll&).die().live(&click&,function(){
//事件运行代码
//先通过die()方法解除，再通过live()绑定
$(&#selectAll&).die().live(&click&,function(){
&&//事件运行代码
&});die()方法简介：
die([type], [fn])&SPAN style=&WHITE-SPACE: normal&& &/SPAN&
die([type], [fn])
jQuery 1.3新增。此方法与live正好完全相反。
如果不带参数，则所有绑定的live事件都会被移除。
你可以解除用live注册的自定义事件。
如果提供了type参数，那么会移除对应的live事件。
如果也指定了第二个参数function,则只移出指定的事件处理函数。
作者：zongquanliu> jquery append安插页面元素之后，元素无法事件监听
jquery append安插页面元素之后，元素无法事件监听
sunyishuai & &
发布时间： & &
浏览：5 & &
回复：1 & &
悬赏：0.0希赛币
jquery append插入页面元素之后，元素无法事件监听
& 我的js代码中有这么一句：&& $("#testcontent").append("&br$>$input type='radio' name='answer' value='c'/&C:"+optionc);（促发点击事件后调用的）&& && 可是append进去的单选按钮 在下面这段代码中无反应。&& $("input[type='radio']").click(function(){&&&&& alert($(this));& });&& 通过查找资料得知是 click方法或者bind方法都无法绑定未来添加元素的事件。&& 而live方法可以，而后改成：&& $("input[type='radio']").live('click',function(){ if($(this).val()==answer){
alert($(this).val()); }&& })&& && 顺便罗嗦一句：$(this)得到的是jquery对象； 而this而且html的DOM对象。
　　唉？我都是用bind重新绑定事件的呀。难道版本问题。qazwsxqaz & &
& & （0）（0）
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&增值电信业务经营许可证湘B2-页面导航：
→ 正文内容 jQuery focus blur
jQuery focus和blur事件的应用详解
本篇文章主要是对jQuery中focus和blur事件的应用进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&&html&&head&&meta http-equiv="Content-Type"content="text/ charset=UTF-8"&&title&鼠标点击后无文字，挪开鼠标后有文字&/title&&script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"&&/script&&script type="text/javascript"&&&&& $(function(){&&&&&&&& /*进入焦点时触发*/&&&&&&&& $("#account").focus(function(){&&&&&&&&&&&&& varoldValue = $(this).val();&&&&&&&&&&&&& if(oldValue == this.defaultValue){&&&&&&&&&&&&&&&&& $(this).val("");&&&&&&&&&&&&& }&&&&&&&& });& &&&&&&&& /*失去焦点时触发*/&&&&&&&& $("#account").blur(function(){&&&&&&&&&&&&& alert("12");&&&&&&&&&&&&& varoldValue = $(this).val();&&&&&&&&&&&&& if(oldValue == ""){&&&&&&&&&&&&&&&&&& $(this).val(this.defaultValue);&&&&&&&&&&&&& }&&&&&&&& });&&&& });&/script&&/head&&body&帐号：&input id="account"name="account" type="text" value="请输入帐号"&&/body&&/html&
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行
12345678910在对一元素写脚本的时候有的是JQUERY,其中用到了BLUR事件,但是一点反应都没有是怎么回事?对于其它的事件都没有问题,版本是1.2或1.3的都不行问题补充：是仿编辑表格的:我的代码如下:
表格代码:
&table border="1"& &tr& &th scope="col"&类别编号 &/th& &th scope="col"&类别名称 &/th& &/tr& &tr& &td&1 &/td& &td class="edittable"&新闻 &/td& &/tr& &/table&
jquery代码:
$(function ()
$(".edittable").click(function ()
var obj = $(this);
var oldtext = $.trim(obj.text());
var inputbox = $("&input type='text'value='"+oldtext+"'&");
obj.html(inputbox);
inputbox.click(function ()
inputbox.css("text-align", "center");
inputbox.css("border", "2px");
inputbox.css("font-size", "16px");
inputbox.width(obj.width());
inputbox.height(obj.height());
inputbox.blur(function ()
window.alert("affasdf");
var objinput = $(this);
var newtext = objinput.text();
var cateid = $.trim(obj.prev().text());
window.alert("affasdf");
);
结果在alert那都没有反应
采纳的答案
inputbox 这个变量是局部变量，外面引用不到
修改下代码
var inputbox；
$(function ()
$(".edittable").click(function ()
var obj = $(this);
var oldtext = $.trim(obj.text());
inputbox = $("&input type='text'value='"+oldtext+"'&");
obj.html(inputbox);
inputbox.click(function ()
inputbox.css("text-align", "center");
inputbox.css("border", "2px");
inputbox.css("font-size", "16px");
inputbox.width(obj.width());
inputbox.height(obj.height());
inputbox.blur(function ()
window.alert("affasdf");
var objinput = $(this);
var newtext = objinput.text();
var cateid = $.trim(obj.prev().text());
window.alert("affasdf");
楼主学学js中变量的作用域问题，参考如下：
var inputbox = $("&input type='text'value='"+oldtext+"'&");
放在inputbox声明的后面同级作用域里，或子作用块里，都行的。
晕死，楼主这个问题不是跟昨天问的是一样的么
引用/problems/27189
你在那里还没有答复呢，难道全部答错了？
把代码贴出来看看
已解决问题
未解决问题jquery focus(fn),blur(fn)方法实例代码,需要的朋友可以参考下. 首先建一个CSS样式表 .highlight{border: 1px solid #EFA100;outline: 2px solid #FFDC97;} 然后增加如下代码 &script type =&text/javascript& language =&javascript&& $(document).ready(function(){ $(&inpu
本篇文章主要是对jQuery中focus和blur事件的应用进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一.需求原因在填写表单时需要实现如下效果 二.具体实现 &!DOCTYPE html PUBLIC &-//W3C//DTDHTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&& &html& &head& &meta http-
Very much like jQuery's trigger method, and often write their own plug-ins used, for example, automatic switching and click to switch images, suspension tab or mouse click to switch and so on, save a lot of effort. Observer pattern to be achieved. A
What is the Event Broker (Event Delegation)? If you do not know friends, you can read: &Event delegation in JavaScript&, where reference is no longer tired. First, let us work together to review some common sense: Typically support event bubblin
这篇文章主要介绍了jquery的trigger和triggerHandler的区别,需要的朋友可以参考下 trigger 和triggerHandler都是模拟事件发生的 用具体的案例来描述一下区别 &html lang=&en&& &head& &meta charset=&utf-8&& &title&test&/title& &script src=&http://code.jquer
这篇文章主要介绍了jQuery中trigger()方法用法,实例分析了trigger()方法的功能.定义及触发匹配元素指定类型事件的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一:规定匹配元素被触发的事件类型. $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自
这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单.如果要阻止这种默认行为,应返回false. &script type=&text/javascript&& $(function(){ $('#btn').bind(&click&, function(){ $('#test').append(&&p&我的绑定函数1&/p&&); })
解决方案: 1:利用contentWindow,直接使用jquery的blur和focus,如果使用原生,加一个浏览器判断然后attachEvent 和 addEventListener就行了 &!-- lang:js--& $($('#frame')[0].contentWindow).blur(function(){}) $($('#frame')[0].contentWindow).focus(function(){}) 2:setTimeout解决它 &!--lang:js--&
jQuery.ajax在IE8中返回JSON数据时存在缓存问题,需要关闭缓存设置 cache为false
jsp代码 &input type=&button& style=&width:130px& name=&myclick& id=&myclick& onclick=&myclick()&/& &input type=&text& style=&width:130px& name=&thisname& id=&thisn
jquery ui 的 dialog 在IE8下会出现不该出现的滚动条,在JQUI的FORUM上SEARCH下,发现也有人碰上,当解决办法就是把滚动条隐藏 此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js var $el =
这篇文章主要介绍了jQuery trigger()方法用法介绍,trigger()方法可以触发匹配元素上指定类型的事件,本文讲解它的使用语法,需要的朋友可以参考下 jQuery的trigger()方法用法介绍: 此方法可以触发匹配元素上指定类型的事件. 它具有两种语法格式,下面就分别做一下介绍. 语法结构一: $(selector).trigger(event,[param1,param2,...]) 参数解析: 1.event:必需,规定匹配元素要触发的事件,可以是自定义事件,也可以是标准的事
jQuery('ul li:contains( Apple )').nextUntil(':contains( Pears )');
// Get banana , Grape, Strawberry jQuery 1.4: 15 A you should be aware of the new features (translation) Collection view plaincopy to clipboardprint? jQuery ('ul li: contains (apple
1, application forms A change of access and loss of focus style (P142) $ (Function () ( $ (&: Input&). Focus (function () (/ / Get the focus of trigger events $ (This). AddClass (&focus&); / / increase Style )). Blur (function () (/ /
这篇文章主要介绍了jQuery事件用法实例汇总,对事件的绑定及各类事件的用法做了较为详尽的实例分析,有很好的借鉴价值,需要的朋友可以参考下 本文以实例形式详细汇总了jQuery中事件的用法,对jQuery的学习有很好的参考价值.分享给大家供大家参考之用.具体用法如下: 1.通过方法名给元素绑定事件: $('li').click(function(event){}) 2.通过bind方法给元素绑定事件: $('li') .bind('click',function(event){}) .bind(
老规矩,先上html和css,还是用官方的,只是去掉了些东西 HTML &!DOCTYPE html& &html& &head& &title&jQuery Tools standalone demo&/title& &!-- include the Tools --& &script src=&http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js&quo
这篇文章主要介绍了基于JQuery制作可编辑的表格特效,一共给出了2种解决方案,小伙伴们能看出来哪种方案更合理吗? 最近做了个项目,其中项目要求:点击表格后可直接编辑,回车或鼠标点击页面其他地方后编辑生效,按Esc可取消编辑 2个小伙伴给出了2中解决方案,大家来看看哪种更合适呢? 第一种单击表格可以编辑的方法 //相当于在页面中的 body标签加上onload事件 $(function() { //找到所有的td节点 var tds = $(&td&); //给所有的td添加点击事件
对于javascript事件扩展,所有的lib都差不多.和jquery和prototype,yui和Ext,其要解决的首要问题是兼容性,所有 lib都会对event进行包裹,统一其属性解决其兼容性. 对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法.一般lib都会对浏览器的提供的函数做一些扩展,解决兼容性内存泄漏等问题.第三个问题就是如何得到domReady的状态. 6.1 event的包裹 浏览器的事件兼容性是一个令人头疼的问题.IE的event
事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本
本文给大家分享的是一段基于jQuery的实现简单的表单提交验证的代码,非常简单实用,推荐给有相同需求的小伙伴们参考下. html表单代码: &form method=&post& action=&&& &div class=&int&& &label for=&username&&用户名:&/label& &input type=&text& id=&q
使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据的实现代码. 下面是js Code: $(function() { // 相当于在页面中的body标签加上onload事件 $(&.caname&).click(function() { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $(&
//------------------------- 第一章 认识JQuery ------------------------- ·页面加载事件(可以写多个ready()) $(document).ready(function(){ alert(&hello world&); }) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等 //选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式 $
1. jQuery 是如何工作的 1.1. 开始使用jQuery jQuery 本身只有一个 js 文件,所以,要使用它,就和使用其它的 js 文件一样,直接将它引入就可以使用了. &script type=&text/javascript& src=&jquery-1.8.3.js&&&/script& 但是,要注意一点,因为 jQuery 大部分功能需要根据文档的 DOM 模型来工作,所以,它首先需要正确地解析到整个文档的 DOM 模型结
ARL.javascript: var declaration variable scope is the current function Do not declare a variable, direct assignment, then automatically creates a variable but the scope is global. 2.jquery to obtain the value of the text box: var text =$(&# t
As a premise, we can generate the HTML on a form: &table width=&200& border=&0&& &tr& &td colspan=&2& align=&center& nowrap& Click to modify &/td& &/tr& &tr& &td width=&10
&script& $ (function () ( / / Find all the td nodes var tds = $ ( &td&); / / To all the td to add click event tds.click (function () ( / / Get the current hits the target var td = $ (this); / / Remove the current td saved the text var oldT
1. All the files in this section are in the annex can be downloaded in the following major details Xiangjie JS JS file $ (Function () ( / / By $ (function ()); directly part of the beginning JQUERY function //$(& Tbody tr: even &). Css (& b
&html& &head& &title&JQuery Dynamically edit a table &/title& &meta http-equiv=&pragma& content=&no-cache&& &meta http-equiv=&cache-control& content=&no-cache&& &meta http-equi
JQuery-1.4.2.js Download: /topics/download/-715e-b-c8de40ef7ad2 &html& &head& &title&JQuery Dynamically edit a table DATA&/title& &!--&meta charset=&utf-8&&--& &link rel
Small fee, then directly into the subject said. . . . . table.html &!DOCTYPE HTML PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&& &html& &head& &title&&/title& &l
1. Pass parameters to the jQuery (...) Before, jQuery can be attr method of setting an attribute, can transfer the property name and value, it can contain several groups of a particular object attribute name-value pairs. In jQuery 1.4, you can put a
1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $(&tbody tr:even&).css
1. First of all, look at the code. 1// Javascript must first be resolved by the content of some of the background color of the different even and odd lines $(function(){ // Content area to find the table all the even lines $(&tbody tr:even&).css
Editable forms to achieve the function, we must address the following issues: 1. Clear the data to modify what columns in the table (how to find these cells); 2. How do c 3. How to deal with
4. To resolve cr
jsp page content: &body& &table& &thead& &tr& &th colspan=&2&& mouse click the table entry can edit &/ th& &/ Tr& &/ Thead& &tbody& &tr& &th& Student ID &/ th& &th& Na
Wrote jQuery 1.4 recently released. Than we expected, this is not a simple patchwork, 1.4 includes many new features, enhancements and performance improvements! This immediately introduces you to those you may find useful new features and optimizatio
Concept: In addition to the common focus, blur events, DOM Level 3 Events module also defines the focusin, focusout and DOMFocusIn, DOMFocusOut four events. Specifications: blur: Before this event fires, the element has lost focus, not bubbling, sync
Modify the data, sometimes for convenience, we hope to which the data directly in the form of direct modification. - Editable forms to achieve the function, we must address the following issues: 1. Clear the data to modify what columns in the table (
Editable form part of the Through the border-collapse: collapse in this way to make the table cell border merger. $ (Function (){}) is the $ (document). Ready (function (){}) a simplified way $ (&Tbody tr&) can return tbody tr nodes in all $ (&q
&! DOCTYPE html PUBLIC &- / / W3C / / DTD XHTML 1.0 Strict / / EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&& &head& &meta http-equiv=&Content-Ty
触发事件,或称模拟用户动作.比如点击,我们可以用代码去模拟用户点击,达到的效果与真实的鼠标点击是一样的. 在 事件模块的演变 我使用了dispatchEvent(标准) 和fireEvent(IE)来主动触发事件.如下 ... dispatch = w3c ? function(el, type){ try{ var evt = document.createEvent('Event'); evt.initEvent(type,true,true); el.dispatchEvent(evt);
文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(&p&).blur(); 或$(&p&).blur(fn)来实现,有需要的朋友可以参考一下 先来看javascript的直接写在了input上 &input name=&pwuser& type=&text& id=&pwuser& class=&input&quo
今天总结一下jQuery事件,这是比较重要的一块,希望本次总结能帮助到很多同我一样的新手 首先,我们来看一个有用的实例,来加深以前所掌握的知识,其中有些是在前边出现过的. &img id=&imgGoogle& src=&.hk/intl/zh-CN/images/logo_cn.png& alt=&& /& &input type=&button&quot
jQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性,还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助. 首先现在你可以从这里下载最新的1.4的版本了: /jquery-1.4.js 1. 传递属性给jQuery 1.4之前的版本中jQuery就通过&attr&方法支持了添加属性到元素集合中,&attr&方法不仅可以传递
jquery学习笔记二 实现可编辑的表格,让表格可以自由的编辑. 实现可编辑的表格demo: 实例图: 代码: &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml&q
密码框提示文字的功能还是比较实用的,下面为大家介绍下使用jquery简单的实现下,喜欢的朋友可以参考下 &html& &head& &title&登录&/title& &script type=&text/javascript& src=&./jquery-1.3.2.min.js&&&/script& &script& $(document).ready(function(){ $
qTip2是一个灰常强大且精致的jQuery提示信息插件,是qTip的第2版,也是一个全新的版本,提供了丰富的功能及漂亮的外观,非常易于使用 qTip2采用了MIT/GPLv2许可,官方网站为:/projects/qtip2/,目前还没发布一个稳定版,Nightly版本经常会更新,当然这并不影响正常使用. 简介 若不放心可以尝试旧版的qTip,但在一些参数上会有所不同:若是从qTip升级到qTip2,可以使用官方提供的转换工具来升级你的代码:http:
在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容 今天学习了利用jQuery实现可以编辑的表格这个例子.这个例子需求是这样的:在前台的表格中单击单元格便可修改其中的内容,回车键保存修改的内容,esc撤销保存的内容.原理:单击客户端表格单元格时,在单元格中添加一个文本框,并将单元格中原来的内容赋值给文本框,再进一步去修改文本框内容,修改后将文本框内容重新赋值给单元格. 源码: 前台代码: &%@ Page Language=&C#& AutoE
这篇文章主要介绍了jQuery实现设置.移除文本框默认值功能,本文实现是类似html5 placeholder(空白提示)效果,正常时文本框有提示文字,当文本框获得焦点时变为空白,需要的朋友可以参考下 jQuery实现的文本框默认值感应鼠标动作: 本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能. 比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会恢复到默认值. 代码实例: &!DOCTYPE html& &html&
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现. 功能实现: 用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现. 实现原理: 在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作. 代码示例: &html& &head&&title&&/title& &style type=&t
Copyright (C) , All Rights Reserved.
版权所有 黔ICP备号-1
processed in 0.045 (s). 10 q(s)