jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
2017-01-16 15:22
399 查看
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题。
按照上面的语法下面的例子是可以实现的
$(".test").css("background-color","pink");将背景色设为pink,但是没有起作用,什么原因呢,原因就在于.test是动态加载的元素,而使用上面的方法不能绑定动态加载元素的事件,修正的方法为使用下面的代码代替:
究其元素就在于使用$(document)意义就在于使元素加载完后才执行方法,所以当为jQuery动态加载的元素绑定on方法的时候,使用$(document)设置代码脚本在DOM元素加载完成后开始执行。
jQuery on函数语法
$(selector).on(event,childSelector,data,function,map)各个参数说明如下:
参数 | 描述 |
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。 |
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
function | 可选。规定当事件发生时运行的函数。 |
map | 规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。 |
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").on("click",function(){ alert("The paragraph was clicked."); }); }); </script> </head> <body> <p>Click this paragraph.</p> </body> </html>但是如果要绑定的on方法是动态加载出来的元素,那么这样使用就是没有用的。看下面的例子:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#div1").click(function(){ $("<div class='test'>test</div>").appendTo($("#div1")); }); $(".test").on("click",function(){ $(".test").css("background-color","pink"); }); $("#div2").bind("click",function(){ $(this).css("background-color","pink"); }); }); </script> </head> <body> <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4> <div id="div1" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>on() method</b>.</p> </div><br> <div id="div2" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>bind() method</b>.</p> </div> </body> </html>上面例子中.test元素是动态加载的,但是给它绑定click方法的时候,明明使用了
$(".test").css("background-color","pink");将背景色设为pink,但是没有起作用,什么原因呢,原因就在于.test是动态加载的元素,而使用上面的方法不能绑定动态加载元素的事件,修正的方法为使用下面的代码代替:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#div1").click(function(){ $("<div class='test'>test</div>").appendTo($("#div1")); }); $(document).on("click",".test",function(){//修改成这样的写法 $(".test").css("background-color","pink"); }); $("#div2").bind("click",function(){ $(this).css("background-color","pink"); }); }); </script> </head> <body> <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4> <div id="div1" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>on() method</b>.</p> </div><br> <div id="div2" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>bind() method</b>.</p> </div> </body> </html>
究其元素就在于使用$(document)意义就在于使元素加载完后才执行方法,所以当为jQuery动态加载的元素绑定on方法的时候,使用$(document)设置代码脚本在DOM元素加载完成后开始执行。
相关文章推荐
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- formValidator 不支持jquery1.9以上的解决办法
- jquery中的live在1.9版本以上失效的解决办法
- jQuery 1.9 以上不支持jquery.alerts.js的解决办法
- jquery1.9以上 动态生成元素 live和on失效的解决方法
- 使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
- andriod 4.0以上版本不调用onConfigrationChange方法的解决办法
- jquery uploadify 在FF下无效的解决办法
- jquery点击事件失效原因及其解决办法
- 由于Spring3.0.5、Hibernante3.2.7、Struts2.1版本不兼容导致的问题及其解决办法。
- jQuery1.9之后使用on()绑定 动态生成元素的 事件无效
- 关于jquery $符号在IE下无效的解决办法
- Android7.0 自定义控件addView(...)无效,View的绘制流程(onMeasure、onLayout等)完全没执行的解决办法。
- 关于下拉框option在IE下jquery方法hide()无效的解决办法
- jquery事件on对于未来元素失效的解决办法
- jquery使用on绑定a标签无效 只能用live解决
- window.onresize 多次触发及其解决办法 - debounce
- 关于jquery 1.9以上多次点击checkbox无法选择的bug解决
- JQuery调用VS2005 c#2.0编写的Webservice时返回值转换成JSON格式的解决办法