对象没有方法'apply' [英] Object has no method 'apply'
问题描述
我正在动态创建一些DOM元素，
I am creating a few DOM elements dynamically like,
var anchorElement = jQuery('<a />',{text:property.text});
var liElement = jQuery('<li />',{"class":"navlink_"+i,id:"navlink_"+i});
anchorElement.on('click',property.fnctn);
liElement.append(anchorElement);
parentID.append(liElement);
其中属性是一个JSON对象。
property.text 是我想要放入锚元素的文本。 （工作正常）
Where property is a JSON object.
property.text is the text that I want to put into anchor element. (Works fine)
我想将click事件处理程序附加到该锚元素。
需要绑定到该元素的函数在JSON中指定，我们可以像
I want to attach a click event handler to that anchor element. The function that needs to be bound to that element is specified in JSON and we can access it like
property.fnctn
以下行应该将事件处理程序绑定到锚元素。
The following line should bind the event handler to the anchor element.
anchorElement.on('click',property.fnctn);
这不起作用，所以我尝试将其转换成字符串，
This was not working so I tried converting it into string like,
anchorElement.on('click',property.fnctn.toString());
没有成功...
何时我点击此链接，错误记录在控制台中
When I click on this link, the error is logged in the console
该对象没有方法'apply'。
是什么原因...... ???
The object has no method 'apply'. What is the reason...???
我能够轻松解决这个问题，比如
I am able to get it working with a slight work around like
anchorElement.attr('onclick',property.fnctn+"()");
上述声明有效，但我想知道为什么 .on（） API无效。
Above statement works, but I want to know why .on() API is not working.
谢谢:) $ b $bAÐitya。
Thanks :) AÐitya.
推荐答案
更新：
你说 property.actfn 是一个字符串，paySomeoneClick。最好不要将字符串用于事件处理程序，而是使用 functions 。如果你想要调用字符串中定义的函数 paySomeoneClick ，如果该函数是全局的，你可以这样做：
Youve said that property.actfn is a string, "paySomeoneClick". It's best not to use strings for event handlers, use functions instead. If you want the function paySomeoneClick, defined in the string, to be called, and if that function is global, you can do this:
anchorElement.on('click',function(event) {
return window[property.fnctn](event);
});
这是有效的，因为全局函数是全局对象的属性，可通过
That works because global functions are properties of the global object, which is available via window on browsers, and because of the bracketed notation described below.
如果函数在一个对象上，你有一个引用，那么：
If the function is on an object you have a reference to, then:
anchorElement.on('click',function(event) {
return theObject[property.fnctn](event);
});
这是有效的，因为在JavaScript中，您可以通过两种方式访问对象的属性：带有文字的虚线表示法属性名称（ foo.bar 访问条 foo ）和带有字符串属性名称的括号表示法（ foo [bar] ）。它们是等价的，当然除了括号内的表示法，字符串可以是表达式的结果，包括来自属性值，如 property.fnctn 。
That works because in JavaScript, you can access properties of objects in two ways: Dotted notation with a literal property name (foo.bar accesses the bar propety on foo) and bracketed notation with a string property name (foo["bar"]). They're equivalent, except of course in the bracketed notation, the string can be the result of an expression, including coming from a property value like property.fnctn.
但我建议退一步并重构一下，这样你就不会在字符串中传递函数名。 有时这是正确的答案，但根据我的经验，并非经常。 ： - ）
But I would recommend stepping back and refactoring a bit so you're not passing function names around in strings. Sometimes it's the right answer, but in my experience, not often. :-)
原始答案：
（这假设为 property.fnctn 是一个函数，而不是字符串。但可能对某人有用......）
(This assumed that property.fnctn was a function, not a string. But may be of some use to someone...)
代码
anchorElement.on('click',property.fnctn);
会将该函数附加到该事件，但在调用该函数期间，此将引用DOM元素， not 指向属性对象。
will attach the function to the event, but during the call to the function, this will refer to the DOM element, not to your property object.
要解决这个问题，请使用jQuery的 $。proxy ：
To get around that, use jQuery's $.proxy:
anchorElement.on('click',$.proxy(property.fnctn, property));
...或ES5的 功能#bind ：
...or ES5's Function#bind:
anchorElement.on('click',property.fnctn.bind(property));
...或关闭：
anchorElement.on('click',function(event) {
return property.fnctn(event);
});
更多阅读（在我的博客上）：
More reading (on my blog):
- Mythical methods
- You must remember
this - Closures are not complicated
这篇关于对象没有方法'apply'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
