Question

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

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

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

Answer 1

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

你忘了单引号：）。

NOT fb（“+ city +”）而非生成fb（北京）

但是fb（'“+ city +”'）比生成fb（'北京'）。

Answer 2

当您处理函数时，由于city将被替换为“Beijing”，html片段将生成如下：

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

正如你在这里看到的，北京周围没有“”。所以它将被视为一个变量，并不存在。

最简单的修复可能是：

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

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

Answer 3

字符串技术中字符串中的字符串是你最终会长大的东西。更好的方法是使用onclick属性来分配click事件：

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);

这不仅消除了字符串中字符串的不可读性，而且还确保了添加到#myDiv元素的DOM节点将被DOM中的JavaScript识别。某些浏览器无法以编程方式识别使用innerHTML添加的DOM元素。我在Firefox和基于XUL的浏览器中遇到过这种行为。

顺便说一句，jQuery可以更顺畅地执行此操作并保证跨浏览器兼容性，但这是jQuery标记的问题。

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

3 个答案: