javascript - TypeError : $(. ..).on 不是prototype.js 的函数

Question

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

我使用表单 $("exportForm") 的 id 调用选择器，并尝试调用其上的 .on(...) 方法，出现有问题的错误。

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

出了什么问题？需要注意什么才能使其正常工作？

PS:Prototype.js版本为1.6.1

Answer 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() 类方法的行为，该方法设置对所有表单子(monad)元素的定时轮询，并在其中任何一个发生更改时触发回调。您确实应该查看该方法的文档，因为它是完成您想要做的事情的真正可靠的方法。但如果您真的想自己动手，可以按照以下方法编写一个可以监听多个元素上的事件的观察者:

$(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 如此强大的原因 - 它每次触发时都会为您提供整个表单的哈希值，因此您可以执行诸如频繁创建预览或验证之类的操作- 有足够的基础来显示“实时”。