JQuery中的事件 (六.移除事件)
阿新 • • 發佈：2019-02-11
1.為同一個元素繫結多個事件
<script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<p>我的繫結函式1</p>"); }).bind("click", function(){ $('#test').append("<p>我的繫結函式2</p>"); }).bind("click", function(){ $('#test').append("<p>我的繫結函式3</p>"); }); }) </script> </head> <body> <button id="btn">點選我</button> <div id="test"></div> </body>
2.清除指定註冊的事件unbind("click"),和所有註冊事件unbind();
<script type="text/javascript"> $(function(){ $('#btn').bind("mouseover", function(){ $('#test').append("<p>我的繫結函式1</p>"); }).bind("click", function(){ $('#test').append("<p>我的繫結函式1</p>"); }).bind("click", function(){ $('#test').append("<p>我的繫結函式2</p>"); }).bind("click", function(){ $('#test').append("<p>我的繫結函式3</p>"); }); $('#delAll').click(function(){ $('#btn').unbind("click"); }); $('#delAll2').click(function(){ $('#btn').unbind(); }); }) </script> </head> <body> <button id="btn">點選我</button> <div id="test"></div> <button id="delAll">刪除所有事件</button> <button id="delAll2">刪除所有事件2</button> </body>
3.刪除指定函式名事件unbind("functionname")
<script type="text/javascript"> $(function(){ $('#btn').bind("click", myFun1 = function(){ $('#test').append("<p>我的繫結函式1</p>"); }).bind("click", myFun2 = function(){ $('#test').append("<p>我的繫結函式2</p>"); }).bind("click", myFun3 = function(){ $('#test').append("<p>我的繫結函式3</p>"); }); $('#delTwo').click(function(){ $('#btn').unbind("click",myFun2); }); }) </script> </head> <body> <button id="btn">點選我</button> <div id="test"></div> <button id="delTwo">刪除第二個事件</button> </body>
4.指定事件觸發1次
<script type="text/javascript">
$(function(){
$('#btn').one("click", function(){
$('#test').append("<p>我的繫結函式1</p>");
}).one("click", function(){
$('#test').append("<p>我的繫結函式2</p>");
}).one("click", function(){
$('#test').append("<p>我的繫結函式3</p>");
});
})
</script>
</head>
<body>
<button id="btn">點選我</button>
<div id="test"></div>
</body>