类型错误: $(..).on 不是带有原型.js的函数



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

我使用形式 $("exportForm"( 的 id 调用选择器,并尝试在其上调用 .on(...( 方法,得到有问题的错误。

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

出了什么问题?寻找什么才能让它工作?

PS:原型.js版本是1.6.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.
});
});

这使用"双美元"方法来获取元素数组,因此将捕获表单内具有 IDexportForm的任何表单输入。

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

观察到的每个表单元素都将被隔离显示:您将无法访问回调中的其余表单输入,只能访问该表单输入。

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

最新更新