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>
相關文章
- Jquery 給Js動態新新增的元素 繫結的點選事件jQueryJS事件
- jQuery給動態新增的元素繫結事件的方法jQuery事件
- jquery 為動態新增的元素繫結事件jQuery事件
- jquery給動態新增的dom元素繫結事件jQuery事件
- jQuery實現DOM元素事件動態繫結jQuery事件
- 解決jquery的多次繫結事件jQuery事件
- 動態生成的html元素繫結click事件HTML事件
- 動態生成html元素繫結事件iphone失效問題解決HTML事件iPhone
- 動態建立的DOM元素進行事件繫結事件
- 關於jQuery用bind動態繫結事件無效的處理jQuery事件
- Wicket中JQuery事件繫結失效的解決jQuery事件
- win8程式無響應的解決辦法
- React map生成元素新增點選事件繫結thisReact事件
- win10開始選單點選無反應解決辦法Win10
- jq動態生成的元素(標籤)新增點選事件事件
- 如何避開jquery動態繫結的事件重疊問題jQuery事件
- 顯示器驅動程式停止響應的解決辦法
- Vue動態路由快取不相互影響的解決辦法Vue路由快取
- 檢視html元素繫結的事件與方法的利器HTML事件
- win10滑鼠能動但是無法點選怎麼辦 win10滑鼠能動但點選無反應的方法Win10
- iOS下的點選事件失效解決方法iOS事件
- jQuery繫結事件jQuery事件
- 動態條件的繫結變數的解決變數
- jQuery之_事件繫結與解綁jQuery事件
- [php]wmap應用程式無法啟動解決辦法PHP
- jquery uploadify在FF下無效的解決辦法jQuery
- 使用 Laravel Sail 時, sail 與容器互動的命令無響應的問題及解決辦法LaravelAI
- Nginx反向代理WebSocket響應403的解決辦法NginxWeb
- 用opacity方法來隱藏元素後,照樣可以觸發繫結在其身上的點選事件事件
- jquery為動態新增元素新增事件薦jQuery事件
- 無法定位程式輸入點於動態連結庫上的解決方法
- jQuery動態生成html元素的幾種方法jQueryHTML
- EditText的點選事件遮蔽鍵盤響應事件
- 解決IIS無響應假死狀態
- 批量更新時無法觸發事件的解決方法事件
- JS給全域性繫結事件以及給除某個元素外的其他元素繫結事件JS事件
- Finder持續無響應怎麼辦?Finder無響應解決教程
- 解決大陸地區android手機market和Gmail無法繫結的方法!AndroidAI