Question

我正在调用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显示错误：未捕获的ReferenceError：未定义编辑。

没有其他错误。

Answer 1

建议不要将混合功能（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 ");
}

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

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

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

Answer 2

可能您已将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错误：未捕获的ReferenceError：未定义编辑

2 个答案: