jQuery和AJAX单击仅可使用一次 [英] jQuery and AJAX on click only works once
问题描述
我正在尝试使用jQuery和Ajax创建一个喜欢/不喜欢"按钮.问题是，当我喜欢某件事时，直到刷新页面后我才能喜欢它；如果我不喜欢某事，则直到刷新页面后，我才能再次喜欢它.
I am trying to make a like/unlike button with jQuery and Ajax. Problem is that when I like something I can't unlike it until I refresh the page, and if I unlike something, I can't like it again until I refresh the page.
这是我的PHP/html:
Here's my PHP/html:
<?php
require('con.php');
session_start();
if (!empty($_POST)) {
$un = $_SESSION['un'];
$op = $_POST['op'];
$pid = $_POST['pid'];
if ($op == "like") {
mysqli_query($con, "INSERT INTO likes (pid, uid, date_liked, username) VALUES ('$pid', '".$_SESSION['id']."', now(), '".$_SESSION['un']."')") or die(mysqli_error($con));
echo 1;
exit;
} elseif ($op == "unlike") {
mysqli_query($con, "DELETE FROM likes WHERE pid = '$pid' AND username = '$un'");
echo 1;
exit();
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Test 2 Test</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<?
$sql = mysqli_query($con, "SELECT * FROM posts") or die(mysqli_error($con));
//get all the posts from the posts table
while ($r = mysqli_fetch_assoc($sql)) {
$b = $r['body'];
$u = $r['uid'];
$pid = $r['pid'];
$s = mysqli_query($con,"SELECT username, pid FROM likes WHERE pid = '$pid' ") or die(mysqli_error($con));
//get all the likes that correspond with the post id from the likes table
$n = mysqli_num_rows($s);
//the number of likes
$r = mysqli_fetch_assoc($s);
$user = $r['username'];
if ($user !== $_SESSION['un']) {
//if the user hasn't liked the post yet
echo "<div>$b</div>";
echo "<input type = 'button' value = '$n' id = 'like_$pid' class='$pid'>";
//the like button
echo "<br><br>"; ?>
<!-- jQuery Script here -->
<?
} else {
//the user has liked the post
echo "<div>$b</div>";
echo "<input type = 'button' value = '$n' id = 'unlike_$pid' class='$pid'>";
//the unlike button
echo "<br><br>"; ?>
<!-- More jQuery -->
<?
}
}
?>
我的jQuery:
$(document).ready(function() {
$('#like_' + <? echo $pid; ?>).click(function() {
var val = parseInt($(this).val(), 10);
var pid = $("." + <? echo $pid; ?>).val();
//create a variable with the num of likes
$.post("test2test.php", {op: "like", pid: pid}, function(data) {
val = val + 1;
$('#like_' + <? echo $pid; ?>).val(val);
$("#like_" + <? echo $pid; ?>).attr("id", "unlike_<? echo $pid; ?>");
});
});
$('#unlike_' + <? echo $pid; ?>).click(function() {
var val = parseInt($(this).val(), 10);
var pid = $("." + <? echo $pid; ?>).val();
$.post("test2test.php", {op: "unlike", pid: pid}, function(data) {
val = val - 1;
$("#unlike_" + <? echo $pid; ?>).val(val);
$('#unlike_' + <? echo $pid; ?>).attr("id", "like_<? echo $pid; ?>");
});
});
});
我将这段代码放在<!--jQuery Script here-->或<!--More jQuery-->
所有这些都在一页上.我没有收到任何PHP的JavaScript错误，所以我不知道怎么回事.
All of this is on one page. I'm not getting any PHP of javascript errors, so I don't know what's up.
请帮助我.
PS:我是jQuery的初学者，所以请不要使您的答案过于复杂.
PS: I am a beginner in jQuery so please don't make your answer too complicated.
谢谢.
推荐答案
您的事件不会附加到页面加载后动态添加的元素上. 尝试事件委派.另外，由于您每次都更改按钮的ID，因此可以使用通配符选择器，如下所示 使用
Your event doesnt get attached to the elements that are added dynamically after the page load. Try event delegation. Also, since you are changing the id of the button each time, you can use wildcard selector as shown below Use
$('body').on('click', '[id^=unlike]', function(){ // or [id^=like]
//your logic
});
代替
$('#unlike_' + <? echo $pid; ?>).click(function() {
});
并同样对其进行更改.
这篇关于jQuery和AJAX单击仅可使用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
