TypeError: $(...).on 不是prototype.js 的函数答案

【问题标题】：TypeError: $(...).on is not a function with prototype.jsTypeError: $(...).on 不是prototype.js 的函数
【发布时间】：2018-12-10 14:07:38
【问题描述】：

我想为表单子项的更改事件添加一个过滤的侦听器，但我从 $ 选择器中得到了奇怪的结果。

我用 $("exportForm") 形式的 id 调用选择器并尝试在其上调用 .on(...) 方法，得到相关错误。

检查返回的元素我似乎找到了一个以数字作为 ownProperties 名称的数组。在控制台 $(...)[1] 中对它们进行索引会返回表单的单个子项。在 proto 属性中，似乎没有应该由选择器添加的 Prototype.js 方法的痕迹。

出了什么问题？寻找什么来让它工作？

PS：Prototype.js 版本为 1.6.1

【问题讨论】：

我为什么要混淆它们？在prototype.js 上还有一个$ 选择器和一个“on”实例方法，它们不应该按预期工作以注册事件侦听器吗？
您是否也将 jQuery 链接到同一页面？另一件需要注意的事情：您使用的是哪个版本的 Prototype.js？ on() 是在 1.7 中添加的，我想可能是 1.6。
@Walter 这确实是一个版本问题：我正在使用 1.6.1 并查看脚本，没有“on”方法的迹象。请将其作为答案，以便我接受。如果他们在文档中有“自版本 X.Y.Z”的注释，那肯定会很好......

标签： javascript prototypejs

【解决方案1】：

你是对的。 on() 是在 1.7 中添加的，所以在这里你不能使用它。 on 方法给你的是“惰性评估”。当你打电话时

$(document).on('eventName', 'css selector', function(){ ... });

...您将获得一个不必在页面加载后或页面的某些部分被 Ajax 回调替换后初始化的观察者。您可以替换页面的一部分，然后再次单击它，观察者将正常工作。

设置观察者的旧方法是这样的：

$(document).observe('dom:loaded', function(){
  $('theId').observe('eventName', function(){
    // do something
  });
});

外部观察者等待页面完成加载，然后内部观察者观察某个对象的事件并对此进行处理。只要 DOM 在加载后不发生变化，这将起作用。如果发生这种情况，那么您必须手动重新注册内部侦听器，因为它的目标已更改，并且不再起作用。 dom:loaded 事件仅在第一次加载页面本身时触发一次。

在您的情况下，您似乎想要复制 Prototype 中 Form.Element.Observer() 类方法的行为，该方法设置了对表单的所有子元素的定时轮询，并在其中任何一个发生更改时触发回调。您真的应该查看该方法的文档，因为它是一种真正防弹的方法来做您想做的事情。但如果你真的想自己动手，下面是编写一个可以监听多个元素事件的观察者的方法：

$(document).observe('dom:loaded', function(){
  $$('#exportForm input').invoke('observe', 'change', function(evt, elm){
    // evt is the event itself, you can cancel, log, whatever
    // elm is a reference to the form element, you can do elm.getValue(), etc.
  });
});

这使用“double-dollar”方法获取元素数组，因此会捕获表单内 ID 为 exportForm 的任何表单输入。

invoke() 将相同的回调和参数应用于元素数组，因此这是为每个表单元素设置单独的 observe 方法——如果您有大量输入，效率将不高！您可以尝试在表单本身上监听change 事件，因此您只有一种观察者方法，但根据您需要支持的浏览器，您可能会发现这些事件并不总是从单个表单输入中冒泡直到表格本身。你必须仔细测试。

观察到的每个表单元素都将被孤立地看到：您将无法从回调中访问其余的表单输入，只能访问那个。

这就是Form.Element.Observer 如此强大的原因——它每次触发时都会为您提供整个表单的哈希值，因此您可以执行诸如创建预览或验证之类的操作，以使其显示为“实时”。

【讨论】：

用更多细节更新了答案。抱歉，我的回答含糊其辞，我正站在一条食品线上，在手机上写字……