将参数传递给JavaScript函数从生成的HTML

我有一个AJAX程序，它从网站获取数据并将信息发布到Facebook。我的问题很简单。我需要在回调函数中生成HTML。这里是一个按钮：将参数传递给JavaScript函数从生成的HTML

var city = "Beijing"; 
html+= "<td><input type=button value=FACEBOOK onclick=\"fb("+city+")\"></td>"; 
document.getElementById("myDiv").innerHTML = html;

说我有变量“城市”，它有一定的价值。通过生成如上所示的按钮，我无法将城市传递给函数fb（城市）。它甚至不会调用该函数。但是，如果我删除参数，它将起作用。

来源

2012-04-10 ssb

var city = "Beijing"; 
html+= "<td><input type=button value=FACEBOOK onclick=\"fb('"+city+"')\"></td>"; 
document.getElementById("myDiv").innerHTML = html;

你忘了单引号:)。

NOT FB（ “+城市+”）比产生FB（北京）

但FB（ ' “+城市+”'）不是产生FB（ '北京'）。

来源

2012-04-10 05:05:24 elrado

字符串内的字符串中的字符串是最终会超出的东西。更好的方法是使用的onclick属性来指定点击事件：

var city = "Beijing"; 
var td = document.createElement("td"); 
var input = document.createElement("input"); 
input.setAttribute("type","button"); 
input.setAttribute("value","FACEBOOK"); 
input.onclick = function() { 
    fb(city); 
}; 

td.appendChild(input); 
document.getElementById("myDiv").appendChild(td);

这不仅消除串中的字符串的不可读性，但它也保证了DOM节点添加到您#myDiv元素会被DOM中的JavaScript识别。某些浏览器无法编程识别使用innerHTML添加的DOM元素。我在Firefox和基于XUL的浏览器中体验过这种行为。另外，jQuery可以更顺畅地执行此操作，并保证跨浏览器的兼容性，但这是jQuery标记的问题。

<td><input type=button value=FACEBOOK onclick="fb(Beijing)"></td>

正如你可以在这里看到，北京没有“”围绕：

来源

2012-04-10 05:10:03 jmort253

当你的功能得到处理，因为城市将被替换为“北京”，在HTML片段将等产生它。所以它会被视为一个变量，并不存在。

的简单的解决办法可能是：

html+= "<td><input type=button value=FACEBOOK onclick=\"fb('" + city + "')\"></td>";

其实还有很多其他更好的方法来达到你的目的。你应该从JavaScript代码绑定'click'事件，而不是在html中添加内联。通过从javascript函数中绑定它，实际上，您可以将该值嵌入到闭包中。

来源

2012-04-10 05:10:50 Mingliang

明，你有关闭的例子吗？我认为这可能值得记录。然后该操作可以决定使用哪种技术。 :) – jmort253 2012-04-10 05:13:13

+1 - 我认为这是很好的建议。当你的JavaScript不在JavaScript和HTML之外时，结果是可维护的代码更多。 – jmort253 2012-04-10 05:17:45

将参数传递给JavaScript函数从生成的HTML

回答

相关问题