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.
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
2 Answers
Reset to default 1Probably 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(...)).
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744751852a4591646.html
评论列表（0条）