4

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

propertyJSON 对象 在哪里。property.text是我要放入锚元素的文本。（工作正常）

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

property.fnctn

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

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

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

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

没有成功...

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

该对象没有“应用”方法。是什么原因...？？？

我可以通过一些轻微的工作来让它工作，比如

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

上面的语句有效，但我想知道为什么.on()API 不起作用。

谢谢:) AÐitya。

4

1 回答 1

8

更新：

你说过那property.actfn是一个字符串，"paySomeoneClick". 最好不要将字符串用于事件处理程序，而是使用函数。如果您希望调用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属性 on foo）和带有字符串属性名称的括号表示法（foo["bar"]）。它们是等价的，当然除了括号中的符号，字符串可以是表达式的结果，包括来自像property.fnctn.

但我建议退后一步并进行一些重构，这样您就不会在字符串中传递函数名称。有时这是正确的答案，但根据我的经验，并不经常。:-)

原始答案：

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

编码

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

会将函数附加到事件，但在调用函数期间，this将引用 DOM 元素，而不是您的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);
});

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

于 2012-07-26T09:30:03.357 回答