时间戳

首页 > 解决方案 > 在动态创建的按钮javascript中调用函数

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

问题描述

我正在尝试创建一个带有 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);
}

标签： javascriptjqueryhtml

解决方案

您可以将按钮创建为 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>

推荐阅读