on()语法:
$(selector).on(event,childSelector,data,function)
event:是要绑定的事件例如"click".
childSelector:要绑定事件的子元素(如果指定了这个参数,则给childSelector绑定事件(包括后期动态生成的元素),selector不绑定).
data:传递到函数的额外数据.
function:绑定事件发生时运行的函数.
<script>
$(function(){
$("#but").click(function(){
$("<p>!!!!!!!!!!!!!!!!!!</p>").appendTo("div");
})
$("div").on("click","p",function(){
$(this).remove();
})
})
</script>
</head>
<body>
<div style="background-color: aquamarine;">
<p>!!!!!!!!!!!!!!!!!!</p>
<input id="but" type="button" value="添加">
</div>
</body>
无论是按钮前面的p还是后期通过点击生成的p都可以通过点击删除.
<script>
$(function(){
$("#but").click(function(){
$("<p>!!!!!!!!!!!!!!!!!!</p>").appendTo("div");
})
$("p").on("click",function(){
$(this).remove();
})
})
</script>
</head>
<body>
<div style="background-color: aquamarine;">
<p>!!!!!!!!!!!!!!!!!!</p>
<input id="but" type="button" value="添加">
</div>
</body>
只有原本存在的p才可以点击删除,后期生成的元素没有绑定事件(与bind效果一样).