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

Jquery keyup 事件不适用于动态添加的 id 属性

Jquery keyup event is not working for dynamicaly added id attribute

jquery

keyup