將參數傳遞給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

回答

相關問題