Jquery keyup event is not working for dynamicaly added id attribute

Question

The keyup event is not working for dynamically added id attribute. My code,

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);
});

In this case the keyup event is only working for the first textbox. How can I trigger the 'keyup' event for dynamically added attributes ?

This is my 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