<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
#box{
position:relative;
width:400px;
height:300px;
background-color: red;
}
</style>
<div id="box">
box
</div>
<input id="btn" type="button" value=" "/><br/>
<ul>
<li> 1 li</li>
<li> 2 li</li>
<li> 3 li</li>
</ul>
<input id="btnAdd" type="button" value=" li"/>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"/>
<script type="text/javascript">
$(function () {
// on （ bind ）
$("#box").on("click mouseover",function () {
alert(this.innerHTML);
});
$("#btn").click(function () {
//$("#box").off();
$("#box").off("click",);
});
// on （ delegate ）
$("ul").on("click","li",function () {
alert(this.innerHTML);
});
let ord=3;
$("#btnAdd").click(function () {
ord++;
$("ul").append("<li> "+ord+" li</li>");
});
});
</script></code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>