如何执行 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>

Answer 2

一个优雅的方法是

创建 <tr> 时，将 someData 值存储在 HTML5 data- 属性中。 jQuery 有 .data() function 用于此目的。
使用 delegated event handler 捕获 <table> 内的所有按钮点击。然后事件处理程序可以轻松地再次检索数据。

function generateTableRow(someData) {
  $("<tr><td><button class='test'>TestButton</button></td></tr>")
    .data("value", someData)
    .appendTo("#results");
}

$(function(){
  $("#results").on("click", "button.test", function () {
    var value = $(this).closest("tr").data("value");
    alert(value);
  });
  generateTableRow("test 1");
  generateTableRow("test 2");
  generateTableRow("test 3");
});

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

<table id="results"></table>

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

How to execute javascript methods generated in html onlclick events

javascript