效果图:
代码
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><script src="/jquery/3.2.1/jquery.js"></script></head><body><button id="add-event-more">叠加绑定SayHello事件 </button><button id="add-event-one">先移再绑定SayHello事件 </button><button id="say-hello">Say Hello </button><script>$(document).ready(function () {var iCount = 0;function sayHello() {alert("Hello!");};// 每Click 1 次, 多响应事件1次 (叠加了) $("#add-event-more").bind("click", function () {iCount = iCount + 1;$("#say-hello").html("Say Hello " + iCount + "次");$("#say-hello").bind("click", sayHello); // 绑定事件(事件叠加了) });// 永远只响应1次事 $("#add-event-one").bind("click", function () {$("#say-hello").html("Say Hello 1次");$("#say-hello").unbind("click").bind("click", sayHello); //先移除事件(避免事件叠加),再绑定事件});});</script></body></html>