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

I'm pretty new to JQuery and I may be missing a few things about it.

I have created a .php file which contains the header of my website. I included it into my main .php file. 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".

I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".

Hope you'll be able to help me about what I'm missing.

The main homepage in which I load the 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":

<!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":

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

Thank you in advance !

There is some points in your code thats better to know .

Your html structure is wrong! simple html5 structure:
<!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.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!

It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.

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

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

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

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