（document）.ready（）中的javascript函数不执行
[英]javascript functions within (document).ready() dont execute
问题描述
$(document).ready(function(){ 'use strict'; console.log('main.js loaded'); //showtable(); function showtable() { console.log("We are in the showtable function in main.js"); let people = [ {name:"Mohinder", gender: "Male", Age: 57}, {name:"Rekha", gender: "Female", Age: 58}, {name:"Karan", gender: "Male", Age: 30}, {name:"Angad", gender: "Male", Age: 20}, {name:"Reba", gender: "Female", Age: 10} ]; var theDiv = document.getElementById("people"); var tableString = ""; tableString += "<table border=1 id='peopleTable' >"; tableString += "<tr class='hdr'><td>Name</td><td>Age</td></tr>"; for (var x = 0; x < people.length; x += 1) tableString += "<tr><td>" + people[x].name + "</td><td>" + people[x].Age + "</td></tr>"; tableString += "</table>"; theDiv.innerHTML += tableString; }; function frontAndCenter() { console.log("We are in the frontAndCenter function in main.js"); var rtnval = '' ; var x = document.getElementsByTagName('table'); if (x[0].className) x[0].className = "raise"; else x[0].className+="raise"; return rtnval; } });
/* Styles go here */ .raise{ box-shadow: 10px 10px 10px green ; margin: auto ; } #mainCanvas{ width: 400px; height:400px; border: solid 1px black; } .hdr { background-color:cyan; } td { padding:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html> <head> <title>Learning JS</title> <link rel="stylesheet" href="main.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <h1> My first application! </h1> <p id="people"></p> <button id='peopleBtn' onclick="showtable();">Show People Table</button> <button id='daBtn' onclick="frontAndCenter();">Click Me</button> <script src="main_funs.js"></script> <script src="main.js"></script> <script src="main2.js"></script> </body> </html>
I am a total newbie so please bear with me. 
我是新手，所以请耐心等待。 I have this small app that I wrote while learning JS. 我在学习JS的过程中编写了这个小应用程序。 It contains a function to create a table of people names and ages that is invoked by a button click. 它包含一个函数，用于创建按钮单击调用的人名和年龄表。 Then there is another function that adds a class to the table which then is modified (display wise) by the CSS in effect and this is also invoked by the click of another button. 然后还有另一个函数，它将一个类添加到表中，然后由有效的CSS修改（显示），这也可以通过单击另一个按钮来调用。 I have put all JS within a file encapsulated in $(document).ready(){....} what I notice is that the functions don't execute. 我已将所有JS放在封装在$（document）.ready（）{....}中的文件中，我注意到这些函数没有执行。 I then added the functions to another JS file without the (document).ready(){....} and those functions execute as expected. 然后我将函数添加到另一个没有（document）.ready（）{....}的JS文件中，并且这些函数按预期执行。 I tried the same with window.onload(){.....} also and they don't execute either. 我也尝试了同样的window.onload（）{.....}，他们也没有执行。 Can someone shed some light on this please? 有人可以对此有所了解吗？ Not sure if I can attach files here or not but the code is pasted above. 不确定我是否可以在这里附加文件，但代码粘贴在上面。 The button clicks will not work. 按钮单击不起作用。 But if you copy the functions to another file and name it main_funs.js the code will work. 但是，如果将函数复制到另一个文件并将其命名为main_funs.js，则代码将起作用。 Sorry did my best to convey the problem I am having but if it is not clear please let me know and I can send you the code files. 抱歉，我尽力传达我遇到的问题，但如果不清楚请告诉我，我可以发给你代码文件。 Thanks 谢谢
main.html main.html中
1 个解决方案
解决方案1
3 已采纳 2016-03-27 13:22:14
The issue is because you have defined the functions in the $(document).ready() handler, so they are out of the scope of the on* event attributes (which rely on the functions being globally available). 问题是因为您已在$(document).ready()处理程序中定义了函数，因此它们不在on*事件属性的范围内（依赖于全局可用的函数）。
To fix this you can move your functions out of the $(document).ready() handler, or better yet, use unobtrusive Javascript to attach your events and keep it all within the handler. 要解决此问题，您可以将函数移出$(document).ready()处理程序，或者更好的是，使用不显眼的Javascript来附加事件并将其全部保存在处理程序中。
As you're already using jQuery, here's an example of how to do that: 由于您已经在使用jQuery，以下是如何执行此操作的示例：
<button id="peopleBtn">Show People Table</button>
<button id="daBtn">Click Me</button>
$(document).ready(function() {
'use strict';
$('#peopleBtn').click(function() {
console.log("We are in the showtable function in main.js");
let people = [{ /* your objects ... */ }];
var $div = $("#people");
var tableString = '<table border="1" id="peopleTable"><tr class="hdr"><td>Name</td><td>Age</td></tr>';
for (var x = 0; x < people.length; x += 1)
tableString += '<tr><td>' + people[x].name + '</td><td>' + people[x].Age + '</td></tr>';
tableString += '</table>';
$("#people").html(tableString);
});
$('#daBtn').click(function() {
console.log("We are in the frontAndCenter function in main.js");
$('table:first').addClass('raise');
})
});
Note that I also tidied the logic slightly by using some of jQuery's methods. 请注意，我还通过使用jQuery的一些方法略微整理了逻辑。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.