3

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

没有其他错误。

4

2 回答 2

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(...)）。

于 2012-09-02T07:44:43.090 回答
1

可能您已经定义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);
});
于 2012-09-02T07:48:46.417 回答