Ember jQuery“一个”事件处理程序被多次调用答案

【问题标题】：Ember jQuery "one" event handler getting called more than onceEmber jQuery“一个”事件处理程序被多次调用
【发布时间】：2018-07-31 11:41:26
【问题描述】：

在我的 Ember 应用程序中，我有一些 jQuery 代码要执行（基于粘贴到输入框）

我的问题是我在我的代码中使用了“一个”，但它被执行了不止一次。根据 jQuery 文档，它应该只被调用一次。

didRender: function() {
    var self = this;
    var $inputs = Ember.$("input[id*=my-field]");

    $inputs.on("paste", function() {
        var $this = Ember.$(this);
        var originalValue = $this.val();
        $this.val("");

        $this.one("input", function() {
            // Why is this getting invoked more than once ?
            // Contains code which splits & sets value to multiple textboxes like 
//$inputBox.val('SPLITTED_PASTED_VALUE');
        });
    });
}

【问题讨论】：

它会根据您调用.one 的次数被调用——因为它在 另一个 事件处理程序中，每次粘贴时都会收到一个新事件。跨度>
.one 运行一次 - 如果您在第一次运行之前再次调用.one(..) 然后.one(..)，那么您会得到两次。请参阅jsfiddle.net/D7jVR/1048（单击按钮时的console.log）这可能不是问题/原因，但主要代表“纯jQuery”。
不太确定为什么需要.one - 继续代码？或使用setTimeout。
所以我想要的是如果粘贴的值不是一定长度，我想恢复到旧值（在 texbox 中）

标签： javascript jquery ember.js

【解决方案1】：

您看到此问题的原因是因为每次 ember 都会重新渲染您的组件/视图，它会重新执行 didRender 挂钩。

由于您附加 jquery 事件的输入元素在渲染中持续存在，因此事件会不断添加。 .one() 确实只执行了一次，正如预期的那样，但您实际上已经多次应用了.on('paste')，这意味着每次您粘贴时，.one() 都会再添加一次。

我的终极建议 - 停止使用 jquery。将 jquery 和 ember 混合在一起会导致发生难以追踪的奇怪事情。

如果这不可行，则更改 on-paste 事件的调用方式。加载组件/控制器时，您的文本框很可能只呈现一次。如果是这种情况，请使用 didInsertElement 将 jquery 侦听器应用于元素。

didInsertElement: function() {
    var self = this;
    var $inputs = Ember.$("input[id*=my-field]");

    $inputs.on("paste", function() {
        var $this = Ember.$(this);
        var originalValue = $this.val();
        $this.val("");

        $this.one("input", function() {
            //Manipulations here
        });
    });
}

另外，考虑一下你是否需要one('input') 事件。它似乎在粘贴后立即执行，因此您可以删除它并在清空值后处理您的操作。

【讨论】：