Javascript Jquery未能对内联html脚本调用函数

我尝试使用我的自定义函数删除

元素

，该函数在我的脚本标记的内联

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>

当我更改此

时也会发生同样的情况。使用
removeThis

这是你的电话号码

有什么想法吗？谢谢。
（p.S.）在JSFIDLE选项中使用DOM ready

更好的代码变体：


var $content = $("#content"),                         // Cache your elements!
    $name    = $("#name"),
    $address = $("#address"),
    data     = [];

function createNewTR() {                              // Helpful function naming

  var name      = $name.val(),                        // Get values
      address   = $address.val(),                     // Get values
      unique_id = new Date().getUTCMilliseconds(),    // UID? whatever...
      $tr       = $("<tr/>", {                        // New ($)TRElement
                   appendTo: $content,                // Where do I go?
                   html: "<td>"+ name +"</td>      \
                          <td>"+ address +"</td>   \
                          <td>"+ unique_id +"</td> \
                          <td></td>"
                   });

  $("<span/>", {                                     // Tell immediately to your SPAN
      html: "X",                                     // what's he's supposed to do:
      appendTo: $tr.find("td:last"),                 // Where to get appended and
      click: function(){ $tr.remove(); }             // remove our $tr element on click
  });

  data.push({
    name:      name,
    address:   address,
    unique_id: unique_id
  });

  $name.add( $address ).val("");
}

$('#save').click(createNewTR);

var$content=$（“#content”），//缓存元素！
$name=$（“#name”），
$address=$（“#address”），
数据=[]；
函数createNewTR（）{//有用的函数命名
var name=$name.val（），//获取值
address=$address.val（），//获取值
unique_id=new Date（）.getutcmillesons（），//UID？随便什么。。。
$tr=$（“”，{//New（$）树元素
appendTo:$content，//我该去哪里？
html:“+name+”\
“+地址+”\
“+唯一的\u id+”\
"
});
$（“”，{//立即告诉您的SPAN
html：“X”//他应该做什么：
appendTo:$tr.find（“td:last”），//在何处追加和
单击：function（）{$tr.remove（）；}//单击删除我们的$tr元素
});
数据推送({
姓名:姓名,，
地址:地址:，
唯一标识：唯一标识
});
$name.add（$address）.val（“”）；
}
$（“#保存”）。单击（createNewTR）；
（p.S.）在JSFIDLE选项中使用DOM ready

更好的代码变体：


var $content = $("#content"),                         // Cache your elements!
    $name    = $("#name"),
    $address = $("#address"),
    data     = [];

function createNewTR() {                              // Helpful function naming

  var name      = $name.val(),                        // Get values
      address   = $address.val(),                     // Get values
      unique_id = new Date().getUTCMilliseconds(),    // UID? whatever...
      $tr       = $("<tr/>", {                        // New ($)TRElement
                   appendTo: $content,                // Where do I go?
                   html: "<td>"+ name +"</td>      \
                          <td>"+ address +"</td>   \
                          <td>"+ unique_id +"</td> \
                          <td></td>"
                   });

  $("<span/>", {                                     // Tell immediately to your SPAN
      html: "X",                                     // what's he's supposed to do:
      appendTo: $tr.find("td:last"),                 // Where to get appended and
      click: function(){ $tr.remove(); }             // remove our $tr element on click
  });

  data.push({
    name:      name,
    address:   address,
    unique_id: unique_id
  });

  $name.add( $address ).val("");
}

$('#save').click(createNewTR);

var$content=$（“#content”），//缓存元素！
$name=$（“#name”），
$address=$（“#address”），
数据=[]；
函数createNewTR（）{//有用的函数命名
var name=$name.val（），//获取值
address=$address.val（），//获取值
unique_id=new Date（）.getutcmillesons（），//UID？随便什么。。。
$tr=$（“”，{//New（$）树元素
appendTo:$content，//我该去哪里？
html:“+name+”\
“+地址+”\
“+唯一的\u id+”\
"
});
$（“”，{//立即告诉您的SPAN
html：“X”//他应该做什么：
appendTo:$tr.find（“td:last”），//在何处追加和
单击：function（）{$tr.remove（）；}//单击删除我们的$tr元素
});
数据推送({
姓名:姓名,，
地址:地址:，
唯一标识：唯一标识
});
$name.add（$address）.val（“”）；
}
$（“#保存”）。单击（createNewTR）；
您会收到错误，因为JSFIDLE默认将您在“javascript”部分输入的所有代码放入一个onload事件，这意味着您的
删除此
函数不在全局范围内，并且对内联javascript不可见。它也将是
removeThis（）
而不是
this.removeThis（）

您会收到错误，因为JSFIDLE默认将您在“javascript”部分中输入的所有代码放入一个onload事件，这意味着您的
删除此
函数不在全局范围内，并且对内联javascript不可见。它也将是
removeThis（）
而不是
this.removeThis（）

尝试将数据属性与关联的事件处理程序一起使用：

'<span data-unique-id="' + unique_id + '">X</span>'

尝试将数据属性与关联的事件处理程序一起使用：

'<span data-unique-id="' + unique_id + '">X</span>'

这是
onclick
函数中的
元素。您不能像这样访问预期的作用域。
这是
onclick
函数中的
元素。您不能像那样访问预期的范围。
$('#content').append(returnData);

// "this" will be the current dom span in the event handler function, where the event occured
var self = this;

// attach event handler on every span that is in #content (if you need only one type of them, you need to use a class, or attribute selector
$('#content span').click(
    function(event)
    {
        self.removeThis( $(this).attr("data-unique-id") );
    }
);