Question

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

我是新手，所以请耐心等待。我在学习JS的过程中编写了这个小应用程序。它包含一个函数，用于创建按钮单击调用的人名和年龄表。然后还有另一个函数，它将一个类添加到表中，然后由有效的CSS修改（显示），这也可以通过单击另一个按钮来调用。我已将所有JS放在封装在$（document）.ready（）{....}中的文件中我注意到的是函数没有执行。然后我将函数添加到另一个没有（document）.ready（）{....}的JS文件中，并且这些函数按预期执行。我也尝试了同样的window.onload（）{.....}，他们也没有执行。有人可以对此有所了解吗？不确定我是否可以在这里附加文件，但代码粘贴在上面。按钮单击不起作用。但是，如果将函数复制到另一个文件并将其命名为main_funs.js，则代码将起作用。抱歉，我尽力传达我遇到的问题，但如果不清楚请告诉我，我可以发给你代码文件。感谢

main.html中

Answer 1

问题是因为您已在$(document).ready()处理程序中定义了函数，因此它们超出了on*事件属性的范围（它依赖于全局可用的函数）。

要解决此问题，您可以将您的功能移出$(document).ready()处理程序，或者更好的是，使用不显眼的Javascript来附加您的事件并将其全部保存在处理程序中。

由于您已经在使用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');
    })
});

请注意，我还使用了一些jQuery的方法来略微整理逻辑。

（document）.ready（）中的javascript函数不执行

1 个答案: