Using a click event isn't working

Question

I am using jQuery AJAX to lead a page with information, from here (on a click event) information is sent to the server to be dealt with and processed, but for some reason it is not working.

My jQuery looks like this:

$( document ).ready(function () {
    $.ajax({
        url: "../content/page-items/header.bootstrap.php",
        type: "GET",
        success: function(R) {
            $("head").append(R);
        }
    });

    $.ajax({
        url: "src/page/reg.php",
        type: "GET",
        success: function(R) {
            $("#register-area").html(R);
        }
    });

    $("#register").click(function() { alert("Clicked"); })

    $("#register").on("click", function() {
        alert("Clicked");
        $.ajax({
            url: "src/script/register_user.php?username=" + $( "#username" ).val() + "&password=" + $( "#password" ).val() + "&email=" + $( "#email" ).val() + "&role=" + $( "#roles option:selected" ).val(),
            type: "GET",
            success: function(R) {
                $("#area").html(R);
            }
        });
    });
});

My basic HTML page is thus:

<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../scripts/ajax/register.document.ready-functions.js"></script>
</head>

<body class="container-fluid">
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6" id="register-area"></div>
        <div class="col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-3"></div>
        <div class="col-sm-6" id="area"></div>
        <div class="col-sm-3"></div>
    </div>
</body>
</html>

And the src page that handles the data going into the form is:

<?php require_once 'func.php'; ?>
<h1 style="text-align: center;">
    Register new user
</h1>
<hr />
<table class="table table-condensed">
    <tr>
        <td><label for="username">Username</label></td>
        <td><input type="text" id="username" placeholder="Username" class="form-control" /></td>
    </tr>
    <tr>
        <td><label for="password">Password</label></td>
        <td><input type="password" id="password" placeholder="Password" class="form-control" /></td>
    </tr>
    <tr>
        <td><label for="email">Email</label></td>
        <td><input type="text" id="email" placeholder="Email Address" class="form-control" /></td>
    </tr>
    <tr>
        <td><label for="roles">Role</label></td>
        <td><?php print UserRoleSelect(); ?></td>
    </tr>
    <tr>
        <td colspan="2"><button id="register" class="form-control btn btn-primary">Register user</button></td>
    </tr>
</table>

And (hopefully) finally, the script that deals with the request is built as such:

<?php
require_once '../../../config.php';    

function UserRoleSelect()
{
    global $link;
    $query = "SELECT * FROM `user_roles`;";
    $roles = mysqli_fetch_all($link->query($query));
    $return = '<select id="roles" class="form-control">';
    $return .= '<option value="">-- Please select --</option>';
    foreach ($roles as $role)
    {
        $return .= '<option value="'.$role[1].'">'.$role[1].'</option>';
    }
    $return .= "</select>";
    return $return;
}
?>

As you can see I have used alerts in the jQuery script to be able to show me where the script is up to, but this does not show anything, I have tried both the .on("click"... function and the .click(function... to try and get the alert to show and I am not getting any errors from the console in Chrome's inspector nor FireBug.

you're not waiting for the html to load before attempting to add an event listener to an element that is in the loaded html — Jaromanda X, Oct 21 '15 at 11:56
The scripts are included in the main file where all the information goes to, do I need to include them in the page that goes into the `register-area` div? — Can O' Spam, Oct 21 '15 at 11:57
@JaromandaX, I am using the `$(document).ready(function()...`, can you please expand on your comment? — Can O' Spam, Oct 21 '15 at 11:58
You need to use delegated event handlers to bind to elements which are not present on DOM load. Check the question I marked as duplicate for more information. — Rory McCrossan, Oct 21 '15 at 11:59
@RoryMcCrossan, please can you re-open this as the question that was marked as the answer for this did not answer my particular question? — Can O' Spam, Oct 21 '15 at 11:59
$.ajax is asynchronous - therefore the code immediately after is executed before the success: function will run .. does that explain why #register doesn't yet exist? — Jaromanda X, Oct 21 '15 at 12:00
@SamSwift it does answer it. Like I said, you need to use delegated event handlers: `$("#register-area").on('click', '#register', fn);` — Rory McCrossan, Oct 21 '15 at 12:01
@Abdulla, I think you got the wrong end of the stick, the table with the button is loaded into the main index page via ajax — Can O' Spam, Oct 21 '15 at 12:06

Using a click event isn't working

0 Answers0