您的位置：首页 > 其它

欢迎使用CSDN-markdown编辑器

2016-05-22 00:17 246 查看

Jquery的on语法

$(selector).on(event,childSelector,data,function,map)


参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

解决方法：

on方法中要先找到原选择器（父容器例：body）,再找到动态添加的选择器（子元素例：.add,按class类名选择)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
p{display: block;margin: 30px 0px;background: #CCCCCC;}
</style>
<script>

$(function(){
$("body").on("click",".add",function(){
$(this).css("background","#999");
});
$("#test").click(function(){
$("body").append("<p class='add'>11111</p>")
})
})

</script>
</head>
<body>
<p class="add">11111</p>
<button id="test">测试</button>
</body>
</html>

对于之前on无法绑定新增元素的原因，主要在于on绑定的元素上未考虑父容器与子元素的关系，以及childSelector 这个参数值。

即on应该作用于新增元素的父容器上，再使用childSelector 这个参数值选择新增子元素进行方法绑定！；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 编辑器

相关文章推荐

新的分享

章节导航