javascript - jQuery无法在嵌入式HTML脚本上调用函数

我尝试使用自定义函数删除element，该自定义函数在脚本标签的内联html内部调用，请参见以下代码：

的HTML

<div id="form">
  <input type="text" name="name", id="name"><br>
  <input type="text" name="address", id="address"><br>
  <br>
  <button id="save">Save</button>
</div>

<br><br>

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Unique ID</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="content">
  </tbody>
</table>

Java脚本

var data = [];

console.log('Initial Data: ');
console.log(data);

$('#save').click(function() {
    var unique_id = new Date().getUTCMilliseconds();
    var returnData = "<tr><td>" + $('#name').val() + "</td><td>" + $('#address').val() + "</td><td>"+unique_id+"</td><td><span onclick='this.removeThis("+unique_id+")'>X</span></td></tr>";
    data.push({
        name: $('#name').val(),
        address: $('#address').val(),
        unique_id: unique_id
    });
    $('#name').val('');
    $('#address').val('');
    console.log('Updated: ');
    console.log(data);
    $('#content').append(returnData);
});

function removeThis(unique_id){
  alert(unique_id);
}

控制台说：

Uncaught TypeError: this.removeThis is not a function

当我用this.removeThis更改removeThis时也会发生同样的事情

这是Fiddle

任何想法？谢谢。

最佳答案

您收到错误消息是因为JSFiddle默认将在“ javascript”部分中输入的所有代码置于onload事件中，这意味着您的removeThis函数不在全局范围内，并且对于嵌入式javascript不可见。也是removeThis()不是this.removeThis()

https://jsfiddle.net/w2f7dux7/