Javascript错误:未捕获引用错误:未定义编辑

Javascript Error: Uncaught ReferenceError: edit is not defined

本文关键字：错误 未定义 编辑 引用 Javascript      更新时间：2023-09-26

我正在从onclick事件中调用一个名为edit的函数，如下所示。

<script type="text/javascript">
  $(document).ready(function () {
    ...
    $.each(data, function (key, val) {
      ...
      var td11 = $('<input type="button" value="Edit" onclick="edit();" />')
        .attr("name",val.Id);
      $(tr2).append(td11);
      $(table1).append(tr2);
    });
    $("#cers").append(table1);

函数是在$.each循环之外，在$（document）.ready内部定义的，如下所示

function edit() {
  alert("Id ");
}

当我点击编辑按钮时，Chrome显示错误：未捕获引用错误：未定义编辑。

没有其他错误。

可能您定义的edit函数不在全局范围内。它不仅应该在$.each循环之外定义，而且应该在$(document).ready等循环之外定义。例如，这适用于：

<!doctype html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
      function func () {
        alert('func');
      }
      $(document).ready(function () {
        $('<a href="#" onClick="func();">link</a>').appendTo('#container');
      });
    </script>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

但最好用javascript绑定事件，在您的情况下：

$.each(data, function (key, val) {
  // ... some code
  var td11 = $('<input type="button" value="Edit">')
    .click(edit)
    .attr('name', val.Id);
  $(tr2).append(td11);
  $(table1).append(tr2);
});

不建议将功能（javascript）与布局（HTML）混合使用，并且随着项目范围的扩大，会带来不太理想的开发体验。最好使用jQuery绑定到该元素上的点击事件，如下所示：

$.each(data, function (key, val) {
    /* . . . */
    var td11 = $('<input type="button" value="Edit" />').attr("name",val.Id);
    $(tr2).append(td11);
    $(table1).append(tr2);
});
$("#cers").append(table1);
$('input[value="Edit"]').click( edit );
function edit() {
    alert("Id ");
}

或者，使用这种样式，您甚至不需要命名函数：

$('input[value="Edit"]').click( function() {
    alert("Id ");
});

但是，如果使用命名函数，则必须在绑定事件处理程序的同一范围内（即，在调用.click(...)的同一作用域内）定义edit。

相关文章：