设置 html 链接以使用 jquery答案

【问题标题】：setting up html link to work with jquery设置 html 链接以使用 jquery
【发布时间】：2013-06-17 19:44:34
【问题描述】：

我正在尝试创建单页应用程序。成功登录后，将显示一个成功页面（login_success.php），其中包含注销链接。当您单击注销链接时，我希望它清空“主”div，并将 logout.php（“您已注销”页面）插入“主”div。但是，当我单击注销链接时，什么也没有发生（似乎 jquery 没有被执行）。我不确定如何处理链接中的“href” - 因为我不希望页面实际更改。这是我的代码：

js/application.js

$("logoutlinkdiv").click(function() {
    $(this).find('a').click(function ()) {
        $("#main").empty();
        $("#main").load("logout.php");
    });
});

模板/login_success.php

<?php
session_start();

if($_SESSION['username'] === null){
    header("location: ../index.php");
}
?>

<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
    <a href = "#">Log out</a>
</div>
</body>
</html>

更新

现在我有了这个代码 - 当我点击“注销”时它仍然什么都不做：

模板/login_success.php

<?php
    session_start();

if($_SESSION['username'] === null){
    header("location: ../index.php");
}
?>

<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
    <a href = "#">Log out</a>
</div>
</body>
</html>

js/application.js

$(document).ready(function() {
    $("#logoutlinkdiv a").click(function() {
        event.preventDefault();
        $("#main").empty();
        $("#main").load("templates/logout.php");
    });
});

index.php

<!DOCTYPE html>
<html>
<head>
<title>it IT</title>
<script src="reqscripts/jquery.js"></script>
<script src="js/application.js"></script>
</head>
<body>
<form id="login" method="post" action="checklogin.php">
    <h1>Member Login</h1>
    <p>Username:<input name="myusername" type="text" id="myusername"></p>
    <p>Password:<input name="mypassword" type="password" id="mypassword"></p>
    <input type="submit" name="Submit" value="Login">
</form>
<div id="main"></div>
</body>
</html>

checklogin.php

<?php

session_start();

$host="localhost"; // Host name
$username="root"; // Mysql username
$password="bonjour3"; // Mysql password
$db_name="itit"; // Database name
$tbl_name="members"; // Table name

// Connect to server and select databse.
$mysqli = new mysqli("$host", "$username", "$password", "$db_name")or die("cannot connect");

// Define $myusername and $mypassword
$myusername=$_POST['myusername'];
$mypassword=$_POST['mypassword'];

$sql = $mysqli->prepare("SELECT * FROM $tbl_name WHERE username=? and password=?");
$sql->bind_param('ss',$myusername,$mypassword);
$sql->execute();
$sql->store_result();//apply to prepare statement
$numRows = $sql->num_rows;

if($numRows === 1){
    $_SESSION['username'] = $myusername;
}
else {
    echo "Wrong Username or Password";
    session_destroy();
}
?>

再次，当我从“login_success.php”中单击“注销”时，除了在 url 上附加了一个“#”（这应该发生，因为它是链接的占位符）之外，什么也没有发生。有什么建议吗？

【问题讨论】：

标签： php jquery login hyperlink single-page-application

【解决方案1】：

你必须把你的 jQuery 脚本放在login_success.php:

<!DOCTYPE html>
<html>
<body>
<h1>Login Successful</h1>
<h2>Username: <? echo $_SESSION['username']?></h2>
<div id="logoutlinkdiv">
    <a href = "#">Log out</a>
</div>

<script type="text/javascript">
   $("#logoutlinkdiv a").click(function() {
           $("#main").empty();
           $("#main").load("logout.php");
   });
</script>
</body>
</html>

或者，代替.click()，使用.on()：

$("#logoutlinkdiv a").on("click", function() {
      $("#main").empty();
      $("#main").load("logout.php");
});

阅读更多clicking here。

更新 v1

为什么在#logoutlinkdiv 中搜索a？只是为了燃烧性能？ — 你不需要这个。我已经更新了代码来清理它。

【讨论】：

【解决方案2】：

这个函数是错误的。你错过了#

$("logoutlinkdiv")

应该是这样的：

$("#logoutlinkdiv")

【讨论】：

感谢您的回复..我修复了上述错误...以及我的 jquery，如下所示...仍然没有运气

【解决方案3】：

使用event.preventDefault() 阻止浏览器跟踪链接。

您只需要一个点击处理程序；你已经嵌套了你的处理程序，这会导致一些奇怪的行为（每次你点击logoutlinkdiv它都会将另一个甚至监听器附加到锚点，所以你最终会多次触发事件）。另外，请检查您的选择器语法，因为您有错误。我已经更新它以搜索logoutlinkdiv 中的所有锚点：

$("#logoutlinkdiv a").click(function(event) {
    event.preventDefault();
    $("#main").empty();
    $("#main").load("logout.php");
});

我猜这只是一个错字，但您的 HTML 也没有显示正在导入 application.js，请确保您已导入该文件，否则它将不会被执行。

【讨论】：

谢谢 - 我很确定我的 application.js 正在被导入......我的 index.php 中有这个 - <script src="js/application.js"></script> ......我还有其他可以在其中工作的 jquery 代码。我更改了代码以反映您的建议...仍然没有运气。
@ewizard 抱歉......我的回答有错字：我忘记将 event 对象传递给点击回调。我更新了我的答案；试试看它是否有效。
我实际上是在朋友的帮助下弄明白的...但是我对同一个程序有一个新问题...你可以在这里查看stackoverflow.com/questions/17139592/…