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

Question

I have a master container php file with a div container. 我有一个带有div容器的主容器php文件。 Initially, the div container doesn't have any content or html children by default when page is loaded. 最初，加载页面时，默认情况下div容器不包含任何内容或html子代。 I use JQuery to load php files to this div container when the user clicks a navigation item in the navbar. 当用户单击导航栏中的导航项时，我使用JQuery将php文件加载到此div容器中。

landingpage.php 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 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);
}

Everything works as expected for landingpage.php which uses landingpage.js for the front end. 一切正常，对于使用登录页面着陆的 Landingpage.php而言 ，一切正常。 No problem. 没问题。

The problem is when admin_accountmanagement.php file is loaded in div_content_container . 问题是在admin_accountmanagement.php中加载了div_content_container文件时。 The JS of admin_account_management.php doesn't seem to bind to elements: 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);
}

For example, let's take url which is 'view/admin_accountmanagement.php' This page gets loaded within div_content_container when user clicks a navbar item Account Management 例如，让我们以url为'view/admin_accountmanagement.php'当用户单击导航栏项目“ 帐户管理 'view/admin_accountmanagement.php'此页面将加载到div_content_container 。

as in 如

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

There are no problems displaying the page or replacing the current element contained in the div_content_container . 显示页面或替换div_content_container包含的当前元素没有问题。 The problem is, the JS file attached to view/admin_accountmanagement.php doesn't seem to apply when view/admin_accountmanagement.php page is loaded in div_content_container 问题是， 连接到 浏览 JS文件 / admin_accountmanagement.php 似乎并不适用，当 视图/ admin_accountmanagement.php页面加载div_content_container

The view/admin_accountmanagement.php is loaded but the click events binded to the elements of view/admin_accountmanagement.php doesn't work . 已加载view / admin_accountmanagement.php ，但绑定到 view / admin_accountmanagement.php 元素的单击事件 不起作用 。 I know this because I tried to display an alert() message on $(document).ready() 我知道这是因为我试图在$(document).ready()上显示alert()消息

admin_accountmanagement.php 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 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
}

I'm only able to display the page but when I click on the <button id="btn_AddUser"> nothing happens. 我只能显示页面，但是当我单击<button id="btn_AddUser">什么也没有发生。

How can I solve this given the how I structured the loading of pages to div_content_container ? 给定div_content_container的页面加载结构，我该如何解决？

Thanks in advance. 提前致谢。

Answer 1

Change your admin_accountmanagement.js to 将您的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
}

This method works because the binding is not dependent on "document ready" as document ready has already been fired when you loaded the parent page for the first time 此方法之所以有效，是因为绑定不依赖于“文档就绪”，因为在您第一次加载父页面时已经触发了文档就绪

Answer 2

@jordan i agree with @Magnus Eriksson as it is better to bind it on('event','selector','function') but make use of .off() before your .on() as you are playing with dynamic content which may cause multiple binding of the function . @jordan我同意@Magnus埃里克森，因为它是更好地结合它on('event','selector','function')但使用.off()你之前.on()如你一起玩线上游戏dynamic内容这可能导致function 多重绑定。 And if you are still not able to get the binding event to work you can try injecting the .js file in your page's head section after the load of your content like: $('head').append('<script src="admin_accountmanagement.js"></script>') . 并且，如果仍然无法使绑定事件正常工作，则可以在加载内容后尝试将.js文件注入页面的head部分，例如： $('head').append('<script src="admin_accountmanagement.js"></script>') 。 With your load() function in your js to bind the click event . 使用js load()函数来绑定click event 。

Or, your use the below code snippet: 或者，您使用以下代码片段：

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>');
   }
}

and then on your .js will look like this: 然后在您的.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