Using jQuery "click" function on an element echoed by php - 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 '
Sign Out
<span id="welcome">
Hello, <b><a href="#" class="sessName">' . $_SESSION["username"] . '
</b></a></span>
';
} else {
echo '
Sign In
Register
';
}
?>
</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>

Answer 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>
Sign Out

Answer 2

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.

Answer 3

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