Javascript错误：未捕获的ReferenceError：未定义编辑

I am calling a function named edit from an onclick event as follows.

我从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);

The function is defined outside the $.each loop, inside $(document).ready, as follows

该函数在$ .each循环外部定义，在$（document）.ready中，如下所示

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

When i click on Edit button, Chrome shown error : Uncaught ReferenceError: edit is not defined.

当我点击“编辑”按钮时，Chrome显示错误：未捕获的ReferenceError：未定义编辑。

No other errors.

没有其他错误。

2 个解决方案

#1

Probably you have defined edit function not in global scope. It should be defined outside not only $.each loop, but outside $(document).ready and etc. For example this works:

可能您已在全局范围内定义了编辑功能。它应该在$ .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>

But it is better to bind event in javascript, in your case:

但在你的情况下，最好在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);
});

#2

Mixing functionality (javascript) in with layout (HTML) is not recommended, and makes for a less-than-optimal development experience as the scope of your project grows larger. It is better to use jQuery to bind to the click event on that element as follows:

建议不要将混合功能（javascript）与布局（HTML）混合使用，因为随着项目范围的扩大，开发体验会不尽如人意。最好使用jQuery绑定到该元素上的click事件，如下所示：

$.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 ");
}

Alternatively, with this style, you don't even need a named function:

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

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

If using the named function, however, it is important that edit be defined within the same scope where the event handler is bound (i.e. in the same scope where you call .click(...)).

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

#1