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

javascript functions within (document).ready() dont execute

本文关键字：执行 函数 中的 document ready javascript      更新时间：2023-09-26

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

问题是因为您在$(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的一些方法对逻辑进行了轻微的整理。

相关文章：