如何使用JQuery在动态创建的输入元素上实现keyup函数？

Question

我无法弄清楚为什么下面的代码无法正常工作。JSFIDDLE链接

$(document).ready(function () {
    addInput();
});

var limit = 30;
function addInput() {
    var numberOfRows = $("#shipping tr").size();
    var id = numberOfRows;
    if (numberOfRows == limit) {
        alert("You have reached the limit of adding " + limit + " inputs");
    } else {
        $('#shipping').append('<tr id="rate' + id + '"></tr>');
        $('tr#rate' + id).append('<td></td>');
        $('tr#rate' + id).append('<td><input type="text" name="rate" /></td>');
    }
    $('input[name=rate]').on('keyup', 'input', function () {
        alert('YAY');
        return false;
    });
}

我正在尝试将一个keyup函数分配给我动态添加的输入框。

期望输出：在一个弹出框中显示“YAY！”

请帮帮我！

- masterial

---

请查看答案中的演示。 - Dipesh Parmar

Answer 1

将一个 keyup 事件处理程序附加到运输表格上，该事件将从 input[name="rate"] 冒泡到运输表格：

$('#shipping').on('keyup', 'input[name="rate"]', function () {
    alert('YAY');
    return false;
});

演示

- msapkal

Answer 2

你需要将事件委托给document，因为它被添加到了document上。

示例

$(document).on('keyup', 'input[name="rate"]', function () {
    alert('YAY ');
});

Working Demo

- Dipesh Parmar

---

当input[name="rate"]元素被添加到[id="shipping"]元素时，完全可以不必一路向上到达document。 - Ian