Question

在我的viewmodel的viewAttached（发布DOM加载）中，我有以下内容：

viewAttached: function () {
            $('.auth-input').keydown(function (e) {
                debugger;
                var check = auth.showRegistering();
                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 13 && auth.showRegistering()) {
                    alert("trying!");
                    auth.register();
                }
                else if (code == 13 && auth.showRegistering() == false) {
                    auth.logIn();
                }
            });
        },

这适用于所有字段，除了隐藏在if语句后面的字段：

<input data-bind="value: email" class="span2 auth-input" type="text" placeholder="Email">
<input data-bind="value: password" class="span2 auth-input" type="password" placeholder="Password">
<!-- ko if: showRegistering -->
<input data-bind="value: passwordConfirm" class="span2 auth-input" type="password" placeholder="Password Confirm">
<!-- /ko -->

似乎keydown动作识别前两个输入，因为它们在DOM加载时可见，但另一个字段最初不可见。

这是一个精简的小提琴，用来演示我正在尝试的内容：

http://jsfiddle.net/PTSkR/41/

有没有办法在第三个输入中捕获按键？

Answer 1

出现此问题是因为敲除'if'绑定会阻止passwordConfirm输入呈现，直到模型被绑定为止。

你可以通过使用knockout绑定keydown事件而不是使用jquery来解决这个问题。

将其放在您的型号上：

OnKeyDown: function (data, e) {
    debugger;
    var check = auth.showRegistering();
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13 && auth.showRegistering()) {
        alert("trying!");
        auth.register();
    }
    else if (code == 13 && auth.showRegistering() == false) {
        auth.logIn();
    }
};

并修改你的绑定：

<input data-bind="value: passwordConfirm, event: {keydown:OnKeyDown}" type="password" />

Answer 2

如果您不确定是否存在DOM元素，则可以使用事件委派。 jQuery让你很容易：

$(document.body).on('keydown', '.auth-input', function (e) {
    var code = e.which;
    if (code == 13) {
        alert("trying!");
    }
});

请参阅此处查看工作示例：http://jsfiddle.net/PTSkR/45/

另外，按照jQuery docs的建议，使用e.which获取字符代码。

knockout：将“keydown”动作应用于'if：“属性中的元素

2 个答案: