javascript - 在动态创建的按钮 javascript 中调用函数

Question

我正在尝试创建一个带有 onClick 的按钮，该按钮调用带有签名 deleteEntry(entry) 的函数。但是，我收到一条错误消息，指出该条目未定义，即使我在同一函数中使用它。我尝试添加转义字符，但没有任何效果。有什么想法吗？

function addToTable(entry) {
  var result = "<tr>"
  result += "<td>" + entry.id + "</td>";
  result += "<td>" + entry.title + "</td>";
  result += "<td>" + entry.url + "</td>";
  result += "<td><button class=\"btn\" onClick=\"deleteEntry(" + entry + 
    ")\">Delete</button></td>";
  result += "</tr>";
  $("#table").append(result);
}

Answer 1

您可以将按钮创建为 jQuery 对象，并使用 on 方法来监听 click 事件。然后，当附加事件监听器时，将按钮附加到该行，就像函数中的其他元素一样。

检查下面的代码片段以查看其实际情况。

// Dummy entry.
var entry = {
  id: 0,
  title: 'test',
  url: 'http://url.com'
}

// Your AJAX call.
function deleteEntry(entry) {
  console.log(entry);
}

function addEntryToTable(entry) {
  var $id = $('<td>' + entry.id + '</td>');
  var $title = $('<td>' + entry.title + '</td>');
  var $url = $('<td>' + entry.url + '</td>');
  var $button = $('<button class="btn">Delete</button>');
  var $buttonWrap = $('<td></td>');
  var $row = $('<tr></tr>');
  
  // Add 'click' event listener to the button.
  $button.on('click', function(event) {
    deleteEntry(entry);
  });
  $buttonWrap.append($button)
  $row.append($id, $title, $url, $buttonWrap);
  $('#table').append($row);
}

addEntryToTable(entry);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table"></table>