admin管理员组

文章数量:1390436

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

<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

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

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

No other errors.

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

<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

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

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

No other errors.

  • javascript
  • jquery
  • html
  • events
  • dom
Share Improve this question edited Sep 2, 2012 at 9:03 Danil Speransky 30.5k6 gold badges69 silver badges78 bronze badges asked Sep 2, 2012 at 7:36 SaurabhSaurabh 771 gold badge1 silver badge6 bronze badges 2
  • Are there any other errors inside the console? – Dr.Molle Commented Sep 2, 2012 at 7:40
  • try reproducing the bug in jsfiddle please – Tina CG Hoehr Commented Sep 2, 2012 at 7:40
Add a ment  | 

2 Answers 2

Reset to default 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:

<!doctype html>

<html>
  <head>
    <script src="http://ajax.googleapis./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:

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

Mixing functionality (javascript) in with layout (HTML) is not remended, 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:

$.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(...)).

本文标签： jqueryJavascript Error Uncaught ReferenceError edit is not definedStack Overflow

版权声明：本文标题：jquery - Javascript Error: Uncaught ReferenceError: edit is not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744751852a2623228.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。