3

我有一个 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)。它甚至不会调用该函数。但是，如果我删除参数，它会起作用。

4

3 回答 3

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

你忘了单引号:)。

NOT fb("+city+") 比生成 fb(Beijing)

但是 fb('"+city+"') 比生成 fb('Beijing')。

于 2012-04-10T05:05:24.463 回答
1

当您处理函数时，由于城市将被替换为“北京”，因此将生成 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 函数绑定它，实际上您可以将值嵌入到闭包中。

于 2012-04-10T05:10:50.157 回答
0

字符串技术中的字符串中的字符串是您最终会超越的东西。更好的技术是使用 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);

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

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

于 2012-04-10T05:10:03.290 回答