删除 keydown 处理程序并将其添加到在处理程序内创建的新文本框答案

【问题标题】：Removing the keydown handler and adding it to a new textbox, which is created inside the handler删除 keydown 处理程序并将其添加到在处理程序内创建的新文本框
【发布时间】：2014-08-14 21:37:40
【问题描述】：

我刚开始尝试在我的应用程序中使用 jQuery，由于我对它不是很熟悉，所以我很快就被一个看似简单的问题阻止了。

我的视图有一个文本框，ID 为“line0”。这将被分配 keydown 处理程序。当我在文本框中按 TAB 时，应该会发生这种情况：

添加一个新的、相同的文本框，其 id 递增（例如 line1、line2）
从第一个文本框中删除 keydown 处理程序
将 keydown 处理程序添加到新文本框

这样处理程序只会在最后一个文本框中按下 TAB 时触发，而当在任何较早的文本框中按下 TAB 时，它只会执行默认行为。

添加文本框有效，句柄被删除，焦点转移到我的新文本框。但是当我在我的新文本框中按 TAB 时，我收到了这个错误：

Uncaught TypeError: undefined is not a function

我认为这是因为我删除了一个匿名函数，然后尝试将其添加到不同的元素。如何将它移动到命名函数以便我可以使用它？

$(document).ready(function () {
    var lines = $("#lines");
    var count = 0;

    $("#line0").on("keydown", function (e) {
        if (e.which == 9) {
            e.preventDefault();

            var keydown = $("#line" + count).keydown;

            $("#line" + count).off("keydown");

            count++;

            $(lines).append('<input id="line' + count + '" type="text" />');
            $("#line" + count).focus();
            $("#line" + count).on("keydown", keydown)
        }
    })
});

编辑： 我忘了用#，所以很明显jquery找不到我想用的元素。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

给你，你也错过了一些# id 指示符，用于动态添加的输入：

$(document).ready(function () {
    var lines = $("#lines");
    var count = 0;
    function keyDownFunc (e) {
            if (e.keyCode == 9) {
                e.preventDefault();

                $("#rule" + count).off("keydown");

                count++;

                $(lines).append('<input id="rule' + count + '" type="text" />');
                $("#rule" + count).focus();
                $(document).on('keydown','#rule'+count,keyDownFunc(e));
            }
        };
    $(document).on("keydown","#rule0", keyDownFunc(e));
});

【讨论】：

不幸的是，这对我不起作用。它抛出一个错误，说 e 没有定义。

【解决方案2】：

我设法找到了解决方案，我只需在创建匿名函数时将其保存到变量中即可。然后我可以稍后在我的代码中使用该名称来调用它。

$(document).ready(function () {
    var lines = $("#lines");
    var count = 0;

    $("#line0").on("keydown", $handler = function (e) {
        if (e.which == 9) {
            e.preventDefault();

            $("#line" + count).off("keydown");

            count++;

            $(lines).append('<input id="line' + count + '" type="text" />');
            $("#line" + count).focus();
            $("#line" + count).on("keydown", $handler)
        }
    })
});

【讨论】：