1 ????<body> 2 ????????????<input type="button" id="J_btn_bind" value="bind方式绑定事件"> 3 ????????????<input type="button" id="J_btn_on" value="on方式绑定事件"> 4 ????????????<input type="button" id="J_btn_offAll" value="解除绑定事件"> 5 ????????????<ul class="cities"> 6 ????????????????<li>传智前端1</li> 7 ????????????????<li>传智前端2</li> 8 ????????????????<li>传智前端3</li> 9 ????????????????<li>传智前端4</li>10 ????????????????<li>传智前端5</li>11 ????????????</ul>12 13 ????</body>14 </html>15 <script>16 ????$(function(){17 ????????// bind方式绑定事件18 ????????$("#J_btn_bind").bind({19 ????????????click:function(){20 ????????????????alert(‘bind啊绑定的事件‘)21 ????????????},22 ????????????mouseenter:function(){23 ????????????????$(this).css("background-color", "red");24 ????????????}25 ????????})26 ????????// delegate方式绑定事件27 ????????$(".cities").delegate(‘li‘,‘click‘,function(event){28 ????????????alert($(this).text());29 ????????})30 ????????// on方式绑定事件31 ????????$("#J_btn_on").on(‘click‘,function () {32 ????????????$(".cities").append(‘<li>dengyanbo</li>‘)33 ????????})34 ????????// 解除事件绑定35 ????????$("#J_btn_offAll").on(‘click‘,function(){36 ????????????$("#J_btn_on").off(‘click‘);37 38 ????????????$(".cities").undelegate(‘click‘);39 40 ????????????$("#J_btn_bind").unbind();41 ????????})42 ????})43 </script>jquery事件绑定
原文地址：https://www.cnblogs.com/yangguoe/p/8175656.html