Question

我正在动态创建一些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);

其中property是JSON对象。 property.text是我想要放入锚元素的文本。（工作正常）

我想将click事件处理程序附加到该锚元素。需要绑定到该元素的函数在JSON中指定，我们可以像

一样访问它

property.fnctn

以下行应该将事件处理程序绑定到锚元素。

anchorElement.on('click',property.fnctn);

这不起作用，所以我尝试将其转换为字符串，

anchorElement.on('click',property.fnctn.toString());

没有成功......

当我点击此链接时，错误会记录在控制台中

该对象没有'apply'方法。是什么原因...... ???

我能够轻松解决这个问题，比如

anchorElement.attr('onclick',property.fnctn+"()");

上述声明有效，但我想知道为什么.on() API无效。

谢谢:) ADITYA。

Answer 1

<强>更新：

你说property.actfn是一个字符串，"paySomeoneClick"。最好不要将字符串用于事件处理程序，而是使用 functions 。如果您希望调用字符串中定义的函数paySomeoneClick，并且该函数是全局函数，则可以执行以下操作：

anchorElement.on('click',function(event) {
    return window[property.fnctn](event);
});

这是有效的，因为全局函数是全局对象的属性，可以通过浏览器上的window获得，也可以使用下面描述的括号表示法。

如果该函数在您引用的对象上，则：

anchorElement.on('click',function(event) {
    return theObject[property.fnctn](event);
});

这是有效的，因为在JavaScript中，您可以通过两种方式访问对象的属性：带有文字属性名称的虚线表示法（foo.bar访问bar上的foo符号）和括号表示法带有字符串属性名称（foo["bar"]）。它们是等价的，当然除了括号中的表示法之外，字符串可以是表达式的结果，包括来自property.fnctn之类的属性值。

但是我会建议退一步并重构一下，这样你就不会在字符串中传递函数名。有时这是正确的答案，但根据我的经验，并非经常。： - ）

原始回答：

（这假设property.fnctn是一个函数，而不是一个字符串。但可能对某人有用......）

代码

anchorElement.on('click',property.fnctn);

会将函数附加到事件中，但在调用函数期间，this将引用DOM元素， not 指向property对象。

要解决这个问题，请使用jQuery的$.proxy：

anchorElement.on('click',$.proxy(property.fnctn, property));

...或ES5的Function#bind：

anchorElement.on('click',property.fnctn.bind(property));

......或关闭：

anchorElement.on('click',function(event) {
    return property.fnctn(event);
});

更多阅读（在我的博客上）：

对象没有方法'apply'

1 个答案: