动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件
生活随笔
收集整理的這篇文章主要介紹了
动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
動態添加行
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;font-size: 14px;font-family: Century Gothic;}.wrap {width: 410px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 400px; }tr,td {/*width: 25%;*/height: 25px;}.btnAdd {width: 110px;height: 29px;font-size: 20px;font-weight: bold;margin-bottom: 20px;}.form_add_title span {width: auto;height: 18px;font-size: 20px;font-family: Century Gothic;font-weight: bold;color: rgb(102,102,102);text-indent: 12px;margin-right: 10px;display: block;text-align: center;padding: 8px 0px 10px;overflow: hidden;background-color: #F5F5F5;}.form_add {position: fixed;top: 29%;left: 50%;margin-left: -197px;padding-bottom: 20px;background-color: #fff;display: none;border: 1px solid #080;text-align: center;}.form_item > .txt {width: 299px;height: 32px;}.form_add_title div {width: 16px;height: 20px;position: absolute;right: 10px;top: 6px;font-size: 29px;line-height: 16px;cursor: pointer;}.form_submit input {margin-top: 20px;width: 169px;height: 32px;}</style><script src="jquery-1.8.3.js"></script><script>// 頁面加載的事件$(function(){// 顯示對話框$("#addData").click(function(){// 顯示對話框$("#formAdd").show();// 顯示遮擋層$("#j_mask").show();});function closeKuang(){ // 隱藏對話框$("#formAdd").hide();// 隱藏遮擋層$("#j_mask").hide();}// 點擊x關閉對話框$("#j_hideFormAdd").click(function(){closeKuang();});// 添加數據的按鈕$("#j_btnAdd").click(function(){// 先獲取課程的文本框對象var j_txtLesson = $("#j_txtLesson");// 獲取學院文本框的對象var j_txtBelSch = $("#j_txtBelSch");// 創建行和列并直接加入到tbody中$("<tr><td>"+j_txtLesson.val()+"</td><td>"+j_txtBelSch.val()+"</td><td><a href='javascript:;' class='get'>GET</a></td></tr>").appendTo($("#j_tbody"));// 關閉對話框closeKuang();// 清空課程的文本框j_txtLesson.val("");j_txtBelSch.val("前端與移動開發學院");});// 頁面加載后就為a注冊點擊事件,使用的是on的方式$("#j_tbody").on("click",".get",function(){$(this).parent().parent().remove();});});</script> </head> <body> <div class="wrap"><div><input type="button" value="添加數據" id="addData" class="btnAdd"></div><table border="1" cellpadding="0" cellspacing="0"><thead><th>課程名稱</th><th>所屬學院</th><th>已學會</th></thead><tbody id="j_tbody"><tr><td>JavaScript</td><td>前端與移動開發學院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>jQuery</td><td>前端與移動開發學院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>HTML5</td><td>前端與移動開發學院</td><td><a href="javascript:;" class="get">GET</a></td></tr><tr><td>CSS</td><td>前端與移動開發學院</td><td><a href="javascript:;" class="get">GET</a></td></tr></tbody></table> </div> <!-- 遮擋的div --> <div id="j_mask" class="mask"></div> <div id="formAdd" class="form_add"><div class="form_add_title"><span>添加數據</span><div id="j_hideFormAdd">x</div></div><div class="form_item"><label class="lb" for="j_txtLesson">課程名稱:</label><input class="txt" type="text" id="j_txtLesson" placeholder="請輸入課程名稱"></div> <div class="form_item"><label class="lb" for="j_txtBelSch">所屬學院:</label><input class="txt" type="text" id="j_txtBelSch" value="前端與移動學院"></div><div class="form_submit"><input type="button" value="添加" id="j_btnAdd"></div> </div></body> </html>為元素解綁事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 用什么方式綁定事件,最好用對應的方式解綁事件// unbind括號中寫什么事件的名字就會把這個事件解綁,會把這個元素的// 這個點擊的多個事件都會解綁// 對象.click()這種方式添加的事件也可以使用unbind解綁// 括號中沒有任何參數,此時該元素的所有的事件全部解綁// 同時解綁多個事件----每個事件的名字中間用空格即可// 第一個按鈕為div綁定事件$("#btn").click(function(){// div的點擊事件$("#dv").bind("click",function(){console.log("div被點了");}).bind("click",function(){console.log("div點兩次了");});// 鼠標進入$("#dv").bind("mouseenter",function(){$(this).css("backgroundColor","blue");});// 鼠標離開$("#dv").bind("mouseleave",function(){$(this).css("backgroundColor","pink");});});// $("#dv").click(function(){// console.log("哈哈");// });// 第二個按鈕為div解綁事件$("#btn2").click(function(){// 解綁的是點擊事件// 解綁的是點擊事件,所有的點擊事件全部移除// $("#dv").unbind("click");// 括號中沒有任何參數,此時該元素的所有的事件全部解綁// $("#dv").unbind();// 同時解綁多個事件$("#dv").unbind("mouseenter mouseleave");});});</script> </head> <body> <input type="button" value="綁定事件" id="btn"> <input type="button" value="解綁事件" id="btn2"> <div id="dv"></div></body> </html>delegate的解綁事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}p {background-color: red;width: 80px;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// delegate綁定事件對應的方式的解綁方式// 點擊第一個按鈕,div有自己的點擊事件,有鼠標進入和鼠標離開事件// 同時為p綁定點擊事件$("#btn").click(function(){// 為div綁定事件$("#dv").click(function(){console.log("div被點了");}).mouseenter(function(){console.log("鼠標進來了");}).mouseleave(function(){console.log("鼠標離開了");});// 在div中創建一個p,同時為p綁定點擊事件$("<p>這是一個p</p>").appendTo($("#dv"));// 為p綁定事件$("#dv").delegate("p","click",function(){console.log("啊,p被點了");});$("#dv").delegate("p","mouseenter",function(){console.log("p的鼠標進入");});});// 第二個按鈕解綁事件$("#btn2").click(function(){// p的點擊事件沒有了,移除了p的所有的事件// $("#dv").undelegate();// 移除的是p的點擊事件// $("#dv").undelegate("p","click");// 可以移除多個事件,但是每個事件之間用空格隔開$("#dv").undelegate("p","click mouseenter");});});</script> </head> <body> <input type="button" value="綁定事件" id="btn"> <input type="button" value="解綁事件" id="btn2"> <div id="dv"></div></body> </html>off的解綁事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;cursor: pointer;}p {background-color: red;width: 80px;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// delegate綁定事件對應的方式的解綁方式// 點擊第一個按鈕,div有自己的點擊事件,有鼠標進入和鼠標離開事件// 同時為p綁定點擊事件$("#btn").click(function(){// 為div綁定事件// 點擊事件$("#dv").click(function(){console.log("div被點了");// 鼠標進入}).mouseenter(function(){console.log("鼠標進來了");// 鼠標離開}).mouseleave(function(){console.log("鼠標離開了");});// 在div中創建一個p,同時為p綁定點擊事件$("<p>這是一個p</p>").appendTo($("#dv"));// 為p綁定事件$("#dv").on("click","p",function(){console.log("啊,p被點了");});$("#dv").on("mouseenter","p",function(){console.log("啊,進入到p里面來了");});$("#dv").on("click","span",function(){console.log("哦,span被點了");});});// 第二個按鈕解綁事件$("#btn2").click(function(){// 解綁事件// 父級元素和子級元素的所有的事件全部解綁// $("#dv").off();// 把父級元素和子級元素的點擊事件解綁// $("#dv").off("click");// 父級元素和子級元素的多個事件,中間用空格// $("#dv").off("click mouseenter");// 解綁p標簽的點擊事件// $("#dv").off("click","p");// p的兩個事件都沒了// $("#dv").off("click mouseenter","p");// p的所有的事件全部解綁// $("#dv").off("","p");// 干掉div中所有的子元素的點擊事件$("#dv").off("click","**");});// 頁面加載$(function(){// 為按鈕綁定點擊事件$("#btn1").on("click",function(){console.log("哈哈,我又變帥了");});});});</script> </head> <body> <input type="button" value="哈哈,我是按鈕" id="btn1"> <input type="button" value="綁定事件" id="btn"> <input type="button" value="解綁事件" id="btn2"> <div id="dv"><span>這是span</span> </div></body> </html>?
總結
以上是生活随笔為你收集整理的动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA生成随机字符串方法
- 下一篇： 事件冒泡及阻止事件冒泡 事件的触发 事件