Question

我正在使用jQuery AJAX引导一个包含信息的页面，从这里（在点击事件上）信息被发送到服务器进行处理和处理，但由于某种原因它无法正常工作。

我的jQuery看起来像这样：

$( 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);
            }
        });
    });
});

我的基本HTML页面是：

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

处理进入表单的数据的src页面是：

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

并且（希望）最后，处理请求的脚本就是这样构建的：

<?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;
}
?>

正如您所看到的，我已经在jQuery脚本中使用了警报，以便能够向我展示脚本的位置，但这没有显示任何内容，我已经尝试了.on("click"...函数和{{ 1}}尝试获取要显示的警报，并且我没有从Chrome的检查器或FireBug中的控制台收到任何错误。

使用单击事件不起作用

0 个答案: