ccckaass的部落格

在與使用者交換資料時，經常會用到 JQuery (append、prepend) 動態方式產生元件使用

如:為一張專輯(Object)輸入不同曲目名稱(item) 或 新增相簿(Object)中的相片數量(item)

若有綁定事件在原先的item上，新增的item會無法被事件所控制

範例：

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

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

Html

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

Javascript

<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的部分改成：

<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 事件了

其他的事件一樣也適用。