Question

在我的Angular应用程序中加载的一个html文件中，我有一个限制用户输入的小JQuery代码（它是一个货币字段）。

因此html文件包含所有输入控件，并在底部显示此代码：

<script>
    $(document).ready(function () {
        $(".currency").on('keydown', function (e) {
            console.log(e.keyCode);

            //removed the implementation...
        });
    });
</script>

这有效，但我也想在其他html文件中使用代码，我认为将它放在另一个脚本文件中会更好。因此，为了安全起见，我将其剪切/粘贴在另一个我知道已加载的脚本文件中，当我调试时，我会转到$(".currency").on('keydown', function (e) {行。

但是：然后没有任何反应，即console.log没有被执行，并且限制用户输入的（此处不可见）代码不起作用。

所以我认为这可能是一个时间问题，我的JQuery事件绑定发生在html加载之前，但我读on是live的替代，并且还挂钩到将来加载控件。

或者我理解错了吗？

Answer 1

如果您的Angular应用程序动态加载这些.currency项，那么您的JS代码段不会将keydown事件处理程序绑定到这些项目。 on不是live的直接替代品。要将事件处理程序绑定到动态添加的元素，您需要使用event delegation

$(document).on('keydown', '.currency', function (e) {
    console.log(e.keycode);
});

这样做是为了绑定文档元素本身的事件处理程序，保证在执行JS时存在。然后，当发生keydown事件时，它会检查事件目标或其父项之一是否为.currency，如果是，则执行处理程序。

但是由于您使用的是Angular，更好的方法是使用其内置指令之一或创建自己的指令。

在您的情况下，ngKeydown。

Answer 2

<tag
    ng-keydown="expression">
    ...
</tag>

表达式可以简单计算调用函数的名称否则@Prashant Palikhe的答案将是最好的

Answer 3

可能是的，如果您的脚本没有角度相关，可能会在angular有时间在页面中转储html之前运行，因此不会进行事件绑定。

您描述要执行的操作的方式似乎必须创建属性directive

Jquery事件在我的Angular应用程序中无效

3 个答案: