Jquery keyup事件不適用於動態添加的id屬性

Question

keyup事件不適用於動態添加的id屬性。我的代碼，

HTML

<div id="more-package-div" class="more-package-area"> 
    <input type="text" name="package_weight[]" id="package_weight_0" placeholder="Package weight" class="package_weight"> 
</div> 
<div id="extra-packages"></div> 
<a href="#" id="add-more-package">Add more package</a> 

JQUERY

var count = 1; 
var i = 0; 
$('#add-more-package').on('click', function(){ 
    $('#extra-packages').append($('#more-package-div').html()); 
    $('#package_weight_'+i).attr('id','package_weight_'+count); 
    i+= 1; 
    count += 1; 
}); 

$('.package_weight').on('keyup', function(){ 
    alert(this.id); 
}); 

在這種情況下，keyup事件只工作了第一個文本框。如何觸發動態添加屬性的'keyup'事件？

這是我JSFiddle

Answer 1

var count = 1; 
var i = 0; 
$('body').on('click','#add-more-package', function(){ 
    $('#extra-packages').append($('#more-package-div').html()); 
    $('#package_weight_'+i).attr('id','package_weight_'+count); 
    i+= 1; 
    count += 1; 
}); 

$('body').on('keyup','.package_weight', function(){ 
    alert(this.id); 
}); 

DEMO