jQuery on()方法綁定動態元素的點擊事件無響應的解決辦法

$('#check_all').on('click' , function(){
alert(1);
});
$("#yujinlist").append(html);
count++; 
}

以上代碼執行時,點擊#check_all時,alert一直沒反應,后在網上查資料時,才知道on前面的元素也必須在頁面加載的時候就存在于dom里面, 那原話是這樣的:

支持給動態元素和屬性綁定事件的是live和on,其中live在JQUERY 1.7之后就不推薦使用了。現在主要用on,使用on的時候也要注意,on前面的元素也必須在頁面加載的時候就存在于dom里面。動態的元素或者樣式等,可以放在on的第二個參數里面。

因為我先輸出相關html,再執行就沒問題了。

<div class="row">\
<div class="col-xs-12">\
<div class="control-group">\
<label class="control-label bolder blue">選擇鎮街</label>\
<div class="row">\
<div class="checkbox col-xs-1">\
<label>\
<input type="checkbox" class="checkbox" id="check_all" />\
<span class="lbl">全區</span>\
</label>\
</div>\
<div id="check_item">\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">西南街道</span>\
</label>\
</div>\
<div class="checkbox col-xs-1 ">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">云東海街道</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label>\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">白坭鎮</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">樂平鎮</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">大塘鎮</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">蘆苞鎮</span>\
</label>\
</div>\
<div class="checkbox col-xs-1">\
<label class="block">\
<input name="towm'+count+'" type="checkbox" class="checkbox" />\
<span class="lbl">南山鎮</span>\
</label>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
<hr />'; 
$('#check_all').on('click' , function(){
var that = this;
$('#check_item').find('input:checkbox')
.each(function(){
alert(2);
this.checked = that.checked;
$(this).closest('.col-xs-1').toggleClass('selected');
});
});

下面看下jquery on() 方法綁定動態元素

jQuery on()方法是官方推薦的綁定事件的一個方法。使用 on() 方法可以給將來動態創建的動態元素綁定指定的事件,例如append等。

<div id="test">
<div class="evt">evt1</div>
</div>
錯誤的用法,下面方法只為第一個class 為 evt 的div 綁定了click事件,使用append動態創建的div則沒有綁定
<script>
// 先綁定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>
正確的用法如下:


<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>




本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247778.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247778.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247778.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

讓數字保持在整數范圍內

讓數字保存在整數范圍內 如&#xff1a; (1~10)之間的數取 10 (10~20)之間的數取 20 (20~30)之間的數取 30 let max (Math.round(數字/10)1)*10

UVA572 Oil Deposits DFS求解

小白書上經典DFS題目。 1. 遞歸實現 // from: https://www.cnblogs.com/huaszjh/p/4686092.html#include <stdio.h> #include <string.h> #define maxn 105 unsigned char data[maxn][maxn]; int m, n, vis[maxn][maxn];void dfs(int x, int y, int ans) {if (x &l…

HTML 表格中的行合并與列合并

colspan是橫向合并&#xff1b;rowspan是縱向合并。colspan是“column span&#xff08;跨列&#xff09;”的縮寫。colspan屬性用在td標簽中&#xff0c;用來指定單元格橫向跨越的列數&#xff1a;單元格1 單元格2 單元格3 單元格4 該例通過把colspan設為“3”, 令所在單元格橫…

java快速排序

package com.atguigu.java;/*** 快速排序* 通過一趟排序將待排序記錄分割成獨立的兩部分&#xff0c;其中一部分記錄的關鍵字均比另一部分關鍵字小&#xff0c;* 則分別對這兩部分繼續進行排序&#xff0c;直到整個序列有序。*/ public class QuickSort {private static void s…

網址備份

1.jstl標簽庫http://archive.apache.org/dist/jakarta/taglibs/standard/binaries/2.tomcat服務器http://tomcat.apache.org/3.mysql架包https://mvnrepository.com/4.jqueryhttps://github.com/jquery/jquery/releases5.圖標http://icons8.com/preloaders6.jquery-formhttp://…

前端開發-熱更新原理解讀

- 一、websocket簡介- 二、熱跟新原理- 三、實例剖析- 四、總結websocket簡介 在h5推出之前&#xff0c;瀏覽器應用跟服務器端通信的機制只有http協議&#xff0c;http是一種無狀態的網絡協議&#xff0c;前端向服務器發起一個請求&#xff0c;服務器給出一次應答&#xff…

java楊輝三角

package com.atguigu.exer; /** 使用二維數組打印一個 10 行楊輝三角。【提示】1. 第一行有 1 個元素, 第 n 行有 n 個元素2. 每一行的第一個元素和最后一個元素都是 13. 從第三行開始, 對于非第一個元素和最后一個元素的元素。即&#xff1a; yanghui[i][j] yanghui[i-1][j-1…

這65條工作和成長建議,你將受用終生!

這65條工作和成長建議&#xff0c;每一條都值得我們認真思考。希望對你有啟發。 從1990年進入格力&#xff0c;董明珠已經工作了近30年。 她花了近30年的時間&#xff0c;一手把格力從一家虧損的中小企業變成全球500強&#xff0c;年銷售額超過1400億。 2004年&#xff0c;她被…

HTML5事件—visibilitychange 頁面可見性改變事件

又看到一個很有意思的HTML5事件 visibilitychange事件是瀏覽器新添加的一個事件&#xff0c;當瀏覽器的某個標簽頁切換到后臺&#xff0c;或從后臺切換到前臺時就會觸發該消息&#xff0c;現在主流的瀏覽器都支持該消息了&#xff0c;例如Chrome, Firefox, IE10等。雖然這只是一…

java回型數

import java.util.Arrays;public class hello {public static void main(String[] args) {//輸出5*5的int n 5;int [][] huizixingnew int[n][n];int minX0;//x軸最小下標int minY0;//y軸最小下標int maxXn-1;//x軸最大下標int maxYn-1;//y軸最大下標int counter0;//計數int xf…

用CSS3 vh 簡單實現DIV全屏居中

vh、vw、vmin、vmax介紹 vw&#xff1a;視窗寬度的百分比&#xff08;1vw 代表視窗的寬度為 1%&#xff09;vh&#xff1a;視窗高度的百分比vmin&#xff1a;當前 vw 和 vh 中較小的一個值vmax&#xff1a;當前 vw 和 vh 中較大的一個值 瀏覽器兼容性 &#xff08;1&#xff09…

解決360等等瀏覽器兼容模式解析不兼容代碼

之前寫的代碼不是很規范 , 在今天測試下發現360瀏覽器等等的瀏覽器使用兼容模式會有很多不兼容 , 網上了解過一下 , 說是很多瀏覽器的兼容模式可能就是為了兼容IE7之前的網站代碼 , 而非我們字面理解的兼容二字 ... OK!跑題了 ... 我的解決方案是在頁面head加<meta http…

java自定義異常報錯

public class TeamException extends Exception{static final long serialVersionUID -3387516993124229948L;public TeamException() {super();}public TeamException(String message) {super(message);} }

P多行溢出省略號的處理

因為-webkit-line-clamp: 2不兼容火狐或IE&#xff0c;采用判斷瀏覽器的方式來啟用哪個方式先判斷是什么瀏覽器 //判斷是否是谷歌瀏覽器 if (!stripos($_SERVER["HTTP_USER_AGENT"], chrome)) {$this->registerCssFile(web/css/view.css); } 行內樣式&#xff08;…

縮小窗口時CSS背景圖出現右側空白BUG的解決方法

頁面容器&#xff08;#wrap&#xff09;與頁面頭部&#xff08;#header &#xff09;為100%寬度。而內容的容器&#xff08;#page&#xff09;為固定寬度960px。瀏覽窗口縮小而小于內容層寬度時會產生寬度理解上的差異。如下圖所示窗口寬度大于內容層寬度&#xff1a; 改變瀏覽…

JAVA鏈接Mysql數據庫(一)

第一步自定義 properties 文件 userroot password12345 urljdbc:mysql://localhost:3306/test?useUnicodetrue&characterEncodingutf8 driverClasscom.mysql.jdbc.Driver第二部 創建 java 文件運行 import java.io.InputStream; import java.sql.Connection; import java…

優化器,SGD+Momentum;Adagrad;RMSProp;Adam

Optimization 隨機梯度下降&#xff08;SGD&#xff09;&#xff1a; 當損失函數在一個方向很敏感在另一個方向不敏感時&#xff0c;會產生上面的問題&#xff0c;紅色的點以“Z”字形梯度下降&#xff0c;而不是以最短距離下降&#xff1b;這種情況在高維空間更加普遍。 SGD的…

iOS開發-平臺使用TestFlight進行Beta測試

使用 TestFlight&#xff0c;你可以向測試人員發布你 App 的 prerelease 版本來收集反饋信息&#xff0c;為將來發布 App 的正式版做準備。現在 TestFlight 是一個可選功能&#xff0c;你也可以不使用它&#xff0c;而是像以往發布 App 那樣直接提交到 appStore。 TestFlight 使…

QPixmap QImage 相互轉化

QPainter p(this); QPixmap pixmap; pixmap.load("E:\\參考文件\\image\\1.jpg"); //QPixmap->QImage QImage tempImage pixmap.toImage(); p.drawImage(0,0,tempImage); QImage image; image.load("E:\\參考文件\\image\\1.jpg"); //QImage->QPixm…

java語言介紹 —(1)

1.基礎常識 軟件&#xff1a;即一系列按照特定順序組織的計算機數據和指令的集合。分為&#xff1a;系統軟件 和 應用軟件 系統軟件&#xff1a;windows , mac os , linux ,unix,android,ios,… 應用軟件&#xff1a;word ,ppt,畫圖板,… 人機交互方式&#xff1a; 圖形化界面…