javascript - Ember jQuery“一个”事件处理程序被多次调用
问题描述
在我的 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');
});
});
}
解决方案
您看到此问题的原因是因为每次 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')
活动。它似乎在粘贴后立即执行,因此您可以删除它并在清空值后处理您的操作。
推荐阅读
- javascript - 谷歌优化防闪烁片段超时
- jquery - JQuery在第一次点击时不触发,但在第二次点击时触发
- webpack - 如何让 eslint 导入/首先了解我的 webpack 别名?
- python - 将一个 GeoPandas 数据框中的每个点链接到另一个数据框中的多边形
- html - 如何使用 react-bootstrap 正确呈现内容?
- xcode - 使用 altool 将 IPA 上传到苹果不起作用
- javascript - jQuery使用变量提取文件名
- php - 如何回显嵌套数组元素?
- unit-testing - Pytest-Variables:如何在没有 funcarg 的情况下使用它们?
- python - 如何在 Django 中使用信号更新值