為jQuery動態新增的Elements綁定事件

經常會用到 JQuery (append、prepend) 動態方式產生元件進行控制，若有綁定事件在原先的item上，新增的item會無法被事件所控制。

 

簡單的範例，點擊 div 方塊會產生一個console.log

而點擊 "add new" 按鈕時產生一個新的div方塊(append)

Html

?
1
2
3
4
<div id="main" style="padding:20px;margin-bottom:100px;">
<div class="item">Default</div>
</div>
<input value="add new" type="button">

 

Javascript

?
1
2
3
4
5
6
7
8
9
10
11
<script>
//點擊item 輸出一個log text
$('.item').on('click', function(){
console.log('Clicked');
});
//點擊按鈕動態產生一個div方塊
$(':button').on('click', function(){
var item = '<div class="item">New</div>';
$('#main').append(item);
});
</script>

 

點擊 Default 時會輸出console.log，但透過按鈕產生的 New 卻無法輸出log

若要讓動態產生的 div 方塊也支援 Click 事件，Javascript的部分改成：

?
1
2
3
4
5
6
7
8
9
10
11
<script>
//綁定的物件改為item的父層元素$('#main')，若沒有父層可直接綁定$(document)即可
$('#main').on('click', '.item', function(){
console.log('Clicked');
});
//點擊按鈕動態產生一個div方塊
$(':button').on('click', function(){
var item = '<div class="item">New</div>';
$('#main').append(item);
});
</script>

這樣一來動態產生的物件也可以支援 Click 事件了

其他的事件一樣也適用。

 

增加click事件按下後彈跳一則簡短的訊息
原本的寫法如下：

?
1
2
3
$('#addCancel').click(function () {
alert('Click事件沒有問題');
});

但Click事件始終沒有效果，原來動態新增的elements要綁定事件需要用.on的方式

?
1
2
3
$('body').on("click", '#addCancel', function () {
alert('用on綁定就沒有問題!!');
});

 

 

參考資料

http://toyo0103.blogspot.tw/2013/04/jqueryelements-jquery-on.html

http://ccckaass.pixnet.net/blog/post/146092931-%5Bjquery%5D-%E5%8B%95%E6%85%8B%E7%94%A2%E7%94%9F%E7%89%A9%E4%BB%B6%28append%29%E7%9A%84-event-%E6%8E%A7%E5%88%B6%28click%29