jQuery选择php文件中包含的div元素？

Question

I'm pretty new to JQuery and I may be missing a few things about it. 我对JQuery还是很陌生，可能会遗漏一些有关它的内容。

I have created a .php file which contains the header of my website. 我创建了一个.php文件，其中包含我网站的标题。 I included it into my main .php file. 我将其包含在我的主要.php文件中。 The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php". “ header.php”包含一个“ div class = userbox_rectangle_full_header”，我想从加载在主“ homepage.php”中的JQuery中进行选择。

I tried selecting it to show an alert on the click of the 'div'. 我尝试选择它以在单击“ div”时显示警报。 When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. 当将Jquery加载到“ header.php”中时，没有问题，警报将正确显示。 But nothing happens when the .js file is loaded in "homepage.php". 但是，将.js文件加载到“ homepage.php”中时，没有任何反应。

Hope you'll be able to help me about what I'm missing. 希望您能对我的失踪有所帮助。

The main homepage in which I load the JQuery: 我在其中加载JQuery的主页：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <title>DSI Welcome</title>
        <link rel="stylesheet" href="../css/homepage.css" />
    </head>
    <body>
        <header>
            <?php include 'header.php';?>
        </header>

        <div class="work_space" id="homepage_work_space">HOMEPAGE</div>
        <div class="work_space" id="userpage_work_space">USERPAGE</div>
    </body>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/jquery_color_animation.js"></script>
    <script src="../js/script/homepage_script.js"></script>
</html>

The "header.php" file which I include into the main "homepage.php": 我包含在主“ homepage.php”中的“ header.php”文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Header</title>
        <link rel="stylesheet" href="../css/header.css" />
    </head>
    <body>
        <header>
            <div class="userbox_rectangle_full_header">&nbsp</div>
        </header>
    </body>
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../js/jquery_color_animation.js"></script>
    <script src="../js/script/header_animation.js"></script>
</html>

Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php": 最后，JQuery代码在“ homepage.php”中加载时不起作用，但在“ header.php”中加载时起作用：

$(document).ready(function() {
    $('#homepage_work_space').on('click', function(){
        alert('hi');
    });
});

Thank you in advance ! 先感谢您！

Answer 1

It looks like you're loading in the scripts outside of the body. 看起来您正在加载体外脚本。 Make sure to load them inside your <head> tags. 确保将它们加载到您的<head>标签中。

Answer 2

There is some points in your code thats better to know . 您的代码中有些要点是更好的了解。

Your html structure is wrong! 您的html结构错误！ simple html5 structure: 简单的html5结构：
<!DOCTYPE html> <html> <head> <title>Title of the document</title>  </head> <body> Content of the document...... </body> </html>
Define your main jquery file in head of your body. 在您的头部定义您的主要jquery文件。
Your document has 2 <body> tag . 您的文档具有2 <body>标记。 (one your main body and other included from header.php ) （您的主体和其他包含在header.php中）
Define your script files(except jquery that defined in head) in the footer , just before </body> 在页脚</body>之前定义脚本文件（在head中定义的jquery除外）。
And in your header.php file dont define any script! 并且在您的header.php文件中不要定义任何脚本！
Have a good time! 玩的很开心！

Answer 3

here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ... 以下是该问题的修订历史的副本和粘贴，目的是根据操作员的描述来演示HTML标记的外观...

file index.php : 文件index.php ：

<html>
    <head>
        <script src="../js/jquery-3.3.1.js"/>
        <script src="../js/jquery_color_animation.js"/>
        <script src="../js/script/homepage_script.js"/>
    </head>
    <body>

        <?php include 'header.php'; ?>

        <!-- further content goes here -->

    </body>
</html>

file header.php : 文件header.php ：

<div class="userbox_rectangle_full_header">
    <div class="work_space" id="homepage_work_space">HOMEPAGE</div>
    <div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>

file homepage_script.js : 文件homepage_script.js ：

$(document).ready(function() {
    $('.work_space').on('click', function(){
        alert('hi');
    });
});

I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc. 我建议使用Twig或任何其他PHP模板引擎，它们是专门用于呈现HTML标记的框架，包括模板位等。

jQuery选择php文件中包含的div元素？

问题描述

3 个解决方案

解决方案1
0 2018-08-07 18:12:15

解决方案2
0 已采纳 2018-08-07 18:46:21

解决方案3
0 2018-08-07 18:58:09

jQuery选择php文件中包含的div元素？

问题描述

3 个解决方案

解决方案1 0 2018-08-07 18:12:15

解决方案2 0 已采纳 2018-08-07 18:46:21

解决方案3 0 2018-08-07 18:58:09

解决方案1
0 2018-08-07 18:12:15

解决方案2
0 已采纳 2018-08-07 18:46:21

解决方案3
0 2018-08-07 18:58:09