Using jQuery "click" function on an element echoed by php

Question

I'm making a forum and I want the user panel to change whenever a user is logged in. So by default it says "Sign in or register." But when a user is logged in it says their name and an option to log out.

The idea is that when they click sign out jQuery will ask for a confirm and if its true they will be redirected to ?logout=true where php handles the rest.

The problem is that jQuery just won't work on the element echoed by php.

Here is the PHP:

<div id="userbar">
    <span id="userPanel">User Panel</span>
    <?php
        if (isset($_SESSION['signedIn'])) {
            echo '
                <a href="#" class="logout">Sign Out</a>
                <span id="welcome">
                    Hello, <b><a href="#" class="sessName">' . $_SESSION["username"] . '
                </b></a></span>
            ';
        } else {
            echo '
                <a href="signin.php" class="signIn">Sign In</a>
                <a href="signup.php" class="register">Register</a>
            ';
        }
    ?>
</div>

And here is the jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript">

    $(".logout").click(function(){
        var exit = confirm("Are you sure you would like to sing out?");

        if (exit == true) {
            window.location("header.php?logout=true");
        }

        return false;
    });

</script>

Is your script at the top of your HTML, or is it at the bottom? Is the PHP loaded via AJAX, or is it loaded when the page is originally rendered? — Jay Blanchard, Mar 30 '17 at 12:49
I've tried both at the top and the bottom. I'm not using AJAX — Chaost, Mar 30 '17 at 12:51
First, you should update your jQuery. Version 1.3 is *very old* — Jay Blanchard, Mar 30 '17 at 12:54
Have you watched the console in the browser's developer tools? Have you included the jQuery library in the project properly? Are there any errors reported? — Jay Blanchard, Mar 30 '17 at 12:55
Thanks a lot, I updated jQuery and checked the developer tool. The issue was that it wouldn't allow me to use jQuery on https//, fixed it now — Chaost, Mar 30 '17 at 13:13
If you change the `src` to remove the protocol you'll be able to use it on HTTPS. `src="//ajax.googleapis.com/....` — Jay Blanchard, Mar 30 '17 at 13:16

Mas Ai · Answer 1 · 2017-03-30T15:04:51.037

1

First, you need to update your jquery is too old.

this the final function i create, you can try it.

       function alertLogOut(){
            var exit = confirm("Are you sure you would like to sing out?");
            if (exit == true) {
                window.location.href="header.php?logout=true"; 
            }
            return false;
        };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a href="#" class="logout" onclick="alertLogOut();">Sign Out</a>

edited Mar 30 '17 at 15:04

answered Mar 30 '17 at 12:50

Mas Ai

43
6

1

Maybe? Why maybe? A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard Mar 30 '17 at 13:01
Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally [you should delegate to the nearest parent existing at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Mar 30 '17 at 14:40
my fault, Thanks for correct my answer, i will edit it. – Mas Ai Mar 30 '17 at 14:56

score 0 · Answer 2 · answered Mar 30 '17 at 13:00

0

You may add your listener on the top of your html. Try to make it this way :

$(document).ready(function() {
    $(".logout").click(function(){
        var exit = confirm("Are you sure you would like to sing out?");

        if (exit == true) {
            window.location("header.php?logout=true");
        }

        return false;
    });
});

This way, jQuery waits until your DOM is completely loaded.

answered Mar 30 '17 at 13:00

Amitsouko

175
5

Do or do not. There is no "try". A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard Mar 30 '17 at 13:01

Plotisateur · Answer 3 · 2017-03-30T16:33:09.667

-1

As the element is not already created in the DOM, you need to use a delegated event for it to work.

See Understanding delegated events

So you would do like that, but you can attach to another container if you wish :

$(document).on('click', '.logout',  

function() {
// Do your things
})

EDIT : I misleaded, everything is already in the DOM with PHP echo

edited Mar 30 '17 at 16:33

answered Mar 30 '17 at 12:53

Plotisateur

476
9
23

My bad, I'm not more used to the PHP mixed with HTML syntax. Effectively everything is up in the DOM with PHP echo. Updated my answer. – Plotisateur Mar 30 '17 at 16:31

Using jQuery "click" function on an element echoed by php

3 Answers3