Question

在从javascript对象创建按钮时，我正在执行以下操作：

    for (buttonName in buttons){ 
         var htmlbutton = '<button type="button" onclick="'+buttons[buttonName]()+'">'+buttonName+'</button>' 
}

我正在尝试将该函数附加到onclick事件但我无法弄清楚正确的sythanx

提前致谢

Answer 1

您无法在字符串中嵌入Function实例。

如果buttons变量是全局变量，则onclick事件处理程序属性中的代码可以访问它：

var htmlbutton= '<button type="button" onclick="buttons[\''+buttonName+'\']()">'+buttonName+'</button>'

但是，上面没有转义，因此如果buttonName可以包含<，&，'，则会遇到问题（可能存在安全问题）或"字符。您必须以各种方式为这些字符串嵌入字符串的JavaScript和HTML转义它们。

更好的方法是避免使用字符串来制作HTML。然后，您可以使用DOM方法和本机JavaScript对象，并避免字符串内部的所有令人困惑的混乱。

var button= document.createElement('button');
button.type= 'button';
button.appendChild(document.createTextNode(buttonName));
button.onclick= buttons[buttonsName];

Answer 2

尝试用以下代码替换您的代码：

for (buttonName in buttons)
{
     var htmlbutton = 
         '<input' + 
         ' type="button"' +
         ' value="' + (buttons[buttonName]).replace(/"/gi, "&quot;") + '"' +
         ' onclick="' + (buttons[buttonName]).replace(/"/gi, "&quot;") + '()"/>';
}

编辑澄清：

由于HTML中没有 可靠的 <button>标记。

来自W3School网站：

重要提示：如果您在HTML表单中使用button元素，则不同的浏览器将提交不同的值。 Internet Explorer将在<button>和</button>标记之间提交文本，而其他浏览器将提交value属性的内容。 使用<input>元素在HTML表单中创建按钮。

Answer 3

我想你正在寻找这样的东西：

for(buttonName in buttons) {
    var htmlbutton = '<button type="button" onclick="window.buttons[\''+buttonName+'\']()">'+buttonName+'</button>';

不是在onclick属性中打印整个函数，而是打印出可调用函数名。只需确保buttons的范围正确。

Answer 4

虽然在这种情况下不需要使用jquery，但我编写的代码是用于jquery插件。到目前为止，这是我能提出的最佳解决方案：

$.each(buttons, function(name, fn) {   

   $('<input type="button" value="'+name+'" />').click(function() { fn.apply() }); 


  });

我还没有发现使用电话或申请房产是否存在任何陷阱，但到目前为止这有点像魅力。

非常感谢您的想法和意见

javascript从对象创建按钮

4 个答案: