javascript - 如何执行 html onclick 事件中生成的 javascript 方法

Question

updateValue() 方法未触发，我不确定如何使用浏览器对其进行调试。

function generateHtmlTableRow() {
    var tr = $("<tr></tr>");
    $("#results").append(tr);

    var someTextData = "test";
    tr.append("<td><input type=\"button\" value=\"TestButton\" onclick=\"updateValue(someTextData);\" /></td>");
}

function updateValue(newText) {
    alert(newText);
}

Answer 1

生成的 html 是问题所在。它无法引用 generateHtmlTableRow 函数范围内的变量。所以它会起作用:

function generateHtmlTableRow() {
    var tr = $("<tr></tr>");
    $("#results").append(tr);

    var someTextData = "test";
    tr.append("<td><input type=\"button\" value=\"TestButton\" onclick=\"updateValue('" + someTextData + "');\" /></td>");
}

function updateValue(newText) {
    alert(newText);
}

$(document).ready(function(){
  console.log('log');
  generateHtmlTableRow();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results"></div>