javascript - 使用 JQuery 的 load(file.php) 方法时,不会加载所选 php 文件的 Javascript
问题描述
我有一个带有 div 容器的主容器 php 文件。最初,当页面加载时,div 容器默认没有任何内容或 html 子项。当用户单击导航栏中的导航项时,我使用 JQuery 将 php 文件加载到此 div 容器。
登陆页面.php
<?php
require_once 'navbar.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Admin | Dashboard</title>
<link rel="stylesheet" href="css/dashboard_admin.css">
</head>
<body>
<div class="wrapper">
<!-- CONTENT CONTAINER's content depends on what was clicked on navbar -->
<div class="container" id="content_container">
<div class="div_dashboardLabel" id="dashboard_Label">
<h2 id="label_Dashboard">Admin Dashboard</h2>
</div>
</div>
<!-- END OF CONTENT CONTAINER-->
</div>
<!-- end of wrapper-->
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var user = '<?php echo json_encode($user);?>';
var role = '<?php echo json_encode($role); ?>';
</script>
<script src="js/landingpage.js"></script>
</body>
</html>
登陆页面.js
/* GLOBAL VARIABLES WITHIN THIS DOCUMENT*/
var div_content_container = $("#content_container");
var navitem_dashboard = $("#admin_dashboard");
var navitem_admin_account_management = $("#admin_accountmanagement");
var userObj = JSON.parse(user);
var roleObj = JSON.parse(role);
var logout = $('#logout');
/* END */
$(document).ready(function(){
loadDashboard(); // dashboard is loaded as default view.
navitem_admin_account_management.on("click",loadAccountManagement);
});
function loadDashboard() {
var url_admin_dashboard = 'view/admin_dashboard.php';
var url_teacher_dashboard = 'view/teacher_dashboard.php';
var url_student_dashboard = 'view/student_dashboard.php';
div_content_container.html('');
if (roleObj.rolename === 'Administrator') {
div_content_container.load(url_admin_dashboard);
} else if (roleObj.rolename === 'Teacher') {
div_content_container.load(url_teacher_dashboard);
} else if (roleObj.rolename === 'Student') {
div_content_container.load(url_student_dashboard);
}
}
function loadAccountManagement(){
var url = 'view/admin_accountmanagement.php';
div_content_container.html('');
div_content_container.load(url);
}
对于使用landingpage.js作为前端的landingpage.php ,一切正常。没问题。
问题是admin_accountmanagement.php
文件加载到div_content_container
. admin_account_management.php的 JS似乎没有绑定到元素:
function loadAccountManagement(){
var url = 'view/admin_accountmanagement.php'; // has its JS file
div_content_container.html('');
div_content_container.load(url);
}
例如,让我们来看看当用户单击导航栏项目时url
,此页面会在其中'view/admin_accountmanagement.php'
加载帐户管理div_content_container
如在
<div class="wrapper">
<!-- CONTENT CONTAINER's content depends on what was clicked on navbar -->
<div class="container" id="content_container">
<!-- view/admin_accountmanagement.php loaded here -->
</div>
<!-- END OF CONTENT CONTAINER-->
</div>
显示页面或替换div_content_container
. 问题是,加载view/admin_accountmanagement.php页面时,附加到view/admin_accountmanagement.php的JS 文件 似乎不适用 div_content_container
view/admin_accountmanagement.php已加载,但绑定到view/admin_accountmanagement.php元素的点击事件 不起作用。我知道这一点是因为我试图在 alert()
$(document).ready()
admin_accountmanagement.php
<body>
<div>
<button class="button" id="btn_AddUser">
Add New User
</button>
</div>
<script src="js/admin_accountmanagement.js"></script> <!-- this JS doesn't seem to get binded when this page is loaded in the div_content_container -->
</body>
admin_accountmanagement.js
var btn_add_user = $('#btn_AddUser');
$(document).ready(function(){
alert("TEST"); //doesn't work no alert message.
btn_add_user.on("click",test); //doesn't work no alert message
});
function test(){
alert("testing"); //doesn't work. no alert message
}
我只能显示页面,但是当我单击时<button id="btn_AddUser">
没有任何反应。
鉴于我如何构建页面加载,我该如何解决这个问题div_content_container
?
提前致谢。
解决方案
改变你admin_accountmanagement.js
的
var btn_add_user = $('#btn_AddUser');
alert('Account management js loaded'); // this should show alert
$(document).on("click",btn_add_user,test);
function test(){
alert("testing"); //doesn't work. no alert message
}
此方法有效,因为绑定不依赖于“文档就绪”,因为当您第一次加载父页面时已经触发了文档就绪
推荐阅读
- c - 如何简化这个 readLine() 函数?
- javascript - 使用增强现实创建 QR 码扫描仪
- java - Java:如果发生变化,同步不会阻塞
- javascript - D3.js如何在使用新数据时更新图表
- python - 如何在 QWidget 中的 matplot 画布上跟踪鼠标?
- variables - 在函数中调用带有空格的变量
- c# - 如何判断浮点除法的结果是否应该是整数?
- android - Graphhopper - 位置索引版本不正确
- javascript - 你可以混合使用 bootstrap 3.3 和 bootstrap 4.1 吗?我试过了,它破坏了网站
- angular - AngularMatTree 似乎知道有数据,但不会显示它