使用JQuery的load（file.php）方法时，不会加载所选php文件的Javascript

Question

我有一个带有div容器的主容器php文件。 最初，加载页面时，默认情况下div容器不包含任何内容或html子代。 当用户单击导航栏中的导航项时，我使用JQuery将php文件加载到此div容器中。

landingpage.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>

Landingpage.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.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'当用户单击导航栏项目“ 帐户管理 '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包含的当前元素没有问题。 问题是， 连接到 浏览 JS文件 / admin_accountmanagement.php 似乎并不适用，当 视图/ admin_accountmanagement.php页面加载div_content_container

已加载view / admin_accountmanagement.php ，但绑定到 view / admin_accountmanagement.php 元素的单击事件 不起作用 。 我知道这是因为我试图在$(document).ready()上显示alert()消息

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的页面加载结构，我该如何解决？

提前致谢。

Answer 1

将您的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
}

此方法之所以有效，是因为绑定不依赖于“文档就绪”，因为在您第一次加载父页面时已经触发了文档就绪

Answer 2

@jordan我同意@Magnus埃里克森，因为它是更好地结合它on('event','selector','function')但使用.off()你之前.on()如你一起玩线上游戏dynamic内容这可能导致function 多重绑定。并且，如果仍然无法使绑定事件正常工作，则可以在加载内容后尝试将.js文件注入页面的head部分，例如： $('head').append('<script src="admin_accountmanagement.js"></script>') 。 使用js load()函数来绑定click event 。

或者，您使用以下代码片段：

function LoadContent()
{
 var url = 'view/admin_accountmanagement.php';
 var jssrc = 'js/admin_accountmanagement.js';
 div_content_container.html('');
 div_content_container.load(url);  
 if($('head').find('*[src="'+jssrc+'"]').length==0)
   {
   //the below approach have some consequences related to it as you will not be able to see the injected js in your developers tool's Sources(in chrome). 
   $('head').append('<script src="'+jssrc+'"></script>');
   }
}

然后在您的.js上将如下所示：

var btn_add_user = null;
$(window).load(function(){
  alert("TEST"); 
  btn_add_user = $('#btn_AddUser');
  btn_add_user.off('click').on("click",test); //use .off('event') if load() is being called multiple times.
});

function test(){
   alert("testing"); 
}

使用JQuery的load（file.php）方法时，不会加载所选php文件的Javascript

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-05-14 05:30:52

解决方案2
0 2018-05-14 05:50:46

使用JQuery的load（file.php）方法时，不会加载所选php文件的Javascript

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-05-14 05:30:52

解决方案2 0 2018-05-14 05:50:46

解决方案1
2 已采纳 2018-05-14 05:30:52

解决方案2
0 2018-05-14 05:50:46