jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
来源:互联网 发布:finereport 阿里云 编辑:程序博客网 时间:2024/05/31 19:52
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替。本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题。
1
$(selector).on(event,childSelector,data,
function
,map)
参数描述event必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。childSelector可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。data可选。规定传递到函数的额外数据。function可选。规定当事件发生时运行的函数。map规定事件映射 ({event:function, event:function, …}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
按照上面的语法下面的例子是可以实现的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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
>
<!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方法的时候,明明使用了
1
$(
".test"
).css(
"background-color"
,
"pink"
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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
>
0 0
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- jQuery 1.9/2.0/2.1及其以上常见的注意事项
- jQuery 1.9 以上不支持jquery.alerts.js的解决办法
- jquery中的live在1.9版本以上失效的解决办法
- jquery on()绑定事件无效
- jquery事件委托off与on连用无效的问题
- 关于jquery $符号在IE下无效的解决办法
- jQuery中animate()对Firefox无效的解决办法
- 关于java中jquery框架无效的解决办法
- 关于java jsp中引入jquery框架无效的解决办法
- 关于jquery $符号在IE下无效的解决办法
- removeMovieClip 无效的解决办法
- SESSION 无效的解决办法
- gitignore无效的解决办法
- checkSelfPermission 无效的解决办法
- 无效指针的解决办法
- .gitignore 无效的解决办法
- 微信开发-access_token 过期解决方法
- UITableView插入Section
- AS3 Worker DEMO
- Eclipse设置:背景与字体大小和xml文件中字体大小调整
- android:descendantFocusability用法简析
- jQuery 1.9/2.0/2.1及其以上 on 无效的解决办法
- Workspace in use or cannot be created, choose a different one.--错误解决办法
- iOS 开发 git和代码时xib出现冲突的解决办法
- 绝缘子的故障处理
- 酷狗界面仿照篇二
- java 给main(String args[]) 函数传参数
- 0.39.0
- C++迭代器的使用方法
- Struts2 学习系列 (6) 类型转换器