jquery - Jquery On 而不是 Live 用于动态输入

Question

我有这个代码...

// Display number of pixels left from nav width
$('.inputs input').live('keyup',function() {
    var nav_width = $('#nav-width').val();
    var sumOfVals = 0;
    $('.inputs input').each(function () {
    sumOfVals = sumOfVals + parseInt($(this).val());
});
sumOfVals = nav_width - sumOfVals;
    $('#px-left em').html(sumOfVals);
});

它需要在动态添加的输入字段的 keyup 事件上执行，但我想使用 'on' 事件。这可能吗？我曾尝试用“on”替换“live”，但没有奏效。

Answer 1

您不能只替换live为on. 如果您阅读有关文档，on您会看到：

.on( events [, selector] [, data], handler(eventObject) )

因此，通过遵循您将on像这样使用的方法：

$('.closest-parent').on('keyup', '.inputs input', function () { ... })

.closest-parent是最接近的父元素.inputs。通过使用最近的父代而不是仅仅使用document您可以提高性能。

Answer 2

这应该有效：

$(document).on('keyup', '.inputs input', function() {
    var nav_width = $('#nav-width').val();
    var sumOfVals = 0;
    $('.inputs input').each(function () {
    sumOfVals = sumOfVals + parseInt($(this).val());
});