Question

我想向窗体的子项的change事件添加一个经过过滤的侦听器，但是我从$选择器中得到了奇怪的结果。

我使用ID为$（“ exportForm”）形式的选择器进行调用，并尝试在其上调用.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()类方法的行为，该方法对所有表单子元素设置定时轮询，并在它们的任何一个改变时触发回调。您确实应该查看该方法的文档，因为这是一种真正防弹的方式来执行您要尝试的操作。但是，如果您真的想自己动手，则可以使用以下方法编写一个可以侦听多个元素上的事件的观察器：

$(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.
  });
});

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

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

观察到的每个表单元素都将单独显示：您将无法从回调内部访问其余的表单输入。

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

TypeError：$（...）。on不是prototype.js的函数

1 个答案: