[英]Object has no method 'apply'
I am creating a few DOM elements dynamically like, 我正在动态创建一些DOM元素,比如
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);
Where property
is a JSON object. 其中property
是JSON对象。 property.text
is the text that I want to put into anchor element. property.text
是我想要放入锚元素的文本。 (Works fine) (工作良好)
I want to attach a click event handler to that anchor element. 我想将click事件处理程序附加到该锚元素。 The function that needs to be bound to that element is specified in JSON and we can access it like 需要绑定到该元素的函数在JSON中指定,我们可以像访问它一样访问它
property.fnctn
The following line should bind the event handler to the anchor element. 以下行应将事件处理程序绑定到anchor元素。
anchorElement.on('click',property.fnctn);
This was not working so I tried converting it into string like, 这不起作用,所以我尝试将其转换为字符串,
anchorElement.on('click',property.fnctn.toString());
No Success... 没有成功......
When I click on this link, the error is logged in the console 当我单击此链接时,错误将记录在控制台中
The object has no method 'apply'. 该对象没有方法'apply'。 What is the reason...??? 是什么原因...???
I am able to get it working with a slight work around like 我可以通过轻微的工作来实现它
anchorElement.attr('onclick',property.fnctn+"()");
Above statement works, but I want to know why .on()
API is not working. 上面的语句有效,但我想知道为什么.on()
API无效。
Thanks :) AÐitya. 谢谢:)AÐitya。
Update : 更新 :
Youve said that property.actfn
is a string, "paySomeoneClick"
. 你说过property.actfn
是一个字符串, "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: 如果您希望调用字符串中定义的函数paySomeoneClick
,并且该函数是全局函数,则可以执行以下操作:
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. 这是因为全局函数是全局对象的属性,可以通过浏览器上的window
获得,也可以使用下面描述的括号表示法。
If the function is on an object you have a reference to, then: 如果函数在您引用的对象上,则:
anchorElement.on('click',function(event) {
return theObject[property.fnctn](event);
});
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"]
). 这是有效的,因为在JavaScript中,您可以通过两种方式访问对象的属性:带有文字属性名称的虚线表示法( foo.bar
访问foo
上的bar
foo.bar
)和带有字符串属性名称的括号表示法( 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
. 它们是等价的,当然除了括号中的表示法之外,字符串可以是表达式的结果,包括来自属性值如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. 有时这是正确的答案,但根据我的经验,并非经常。 :-) :-)
Original answer : 原始答案 :
(This assumed that property.fnctn
was a function, not a string. But may be of some use to someone...) (这假设property.fnctn
是一个函数,而不是一个字符串。但可能对某人有用......)
The code 代码
anchorElement.on('click',property.fnctn);
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. 将函数附加到事件,但在调用函数期间, this
将引用DOM元素, 而不是 property
对象。
To get around that, use jQuery's $.proxy
: 要解决这个问题,请使用jQuery的$.proxy
:
anchorElement.on('click',$.proxy(property.fnctn, property));
...or ES5's Function#bind
: ...或ES5的Function#bind
#bind:
anchorElement.on('click',property.fnctn.bind(property));
...or a closure: ...或关闭:
anchorElement.on('click',function(event) {
return property.fnctn(event);
});
More reading (on my blog): 更多阅读(在我的博客上):
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.