點擊jQuery和AJAX只能工作一次

我想用jQuery和Ajax製作一個類似/不同的按鈕。問題在於，當我喜歡某些東西時，我無法像它一樣刷新頁面，如果我不喜歡它，在刷新頁面之前我不會再喜歡它。點擊jQuery和AJAX只能工作一次

這裏是我的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; ?>"); 
     }); 
    }); 
});

我把這段代碼無論它說或

所有這一切都是在一個頁面上。我沒有收到任何PHP的JavaScript錯誤，所以我不知道發生了什麼。

請幫幫我。

PS：我是jQuery的初學者，所以請不要讓你的回答太複雜。

謝謝。

來源

2014-02-27 nitrous

你的事件犯規得到重視動態添加元素在頁面加載之後。嘗試事件代表團。此外，由於你每次都改變了按鈕的ID，您可以使用通配符選擇如下圖所示使用

$('body').on('click', '[id^=unlike]', function(){ // or [id^=like] 
//your logic 
});

，而不是

$('#unlike_' + <? echo $pid; ?>).click(function() { 
});

，同樣改變它像了。

來源

2014-02-27 02:33:43 rakhi4110

現在它喜歡每個帖子和不喜歡的每一篇文章 – nitrous

改變它''[id^= different_ <？echo $ pid;？>]' – nitrous

的問題是，你的ID的變化不僅會說：它改變了ID，但是此ID的事件處理程序沒有分配給它會自動

來源

2014-02-27 02:19:47

而不是修改元素的ID，修改另一個屬性，如類，這種方式，你不需要重新應用事件處理程序，你可以使用一個單一的事件處理程序來處理所有喜歡/不像按鈕而不是循環它們，這看起來像你在做什麼。而不是在ID中添加一個唯一的數字，您可以使用data屬性，這樣您就不必擔心從字符串中提取整數（因爲ID不能以整數開頭）。實際上，您可以將PHP完全從JavaScript中移出。

因此，舉例來說，如果你有以下的HTML：

<div data-id="12345" class="clickme like"></div> 
<div data-id="23456" class="clickme unlike"></div>

哪裏「喜歡」是一個按鈕，喜歡它，「不像」是一種不同於按鈕。然後，您可以執行以下操作：

$(document).ready(function() { 
    $('.clickme').click(function() { 
     // Like it: 
     if ($(this).hasClass("like")) { 
      var pid = $(this)attr("data-id"); 
      $.post("test2test.php", {op: "like", pid: pid}); 
      $(this).removeClass("like"); 
      $(this).addClass("unlike"); 
     } 
     // Unlike it: 
     else { 
      var pid = $(this)attr("data-id"); 
      $.post("test2test.php", {op: "unlike", pid: pid}); 
      $(this).addClass("like"); 
      $(this).removeClass("unlike"); 
     } 
    }); 
});

此外，即使這與您的問題沒有直接關係。使用帶有參數化查詢mysqli的預準備語句始終是一種好習慣，即使這些值來自數據庫或您認爲值得信賴的源。例如，您的$pid變量會直接進入您的查詢，從而導致SQL注入攻擊。只准備參數化查詢，不要擔心數據庫中會發生什麼。

來源

2014-02-27 02:39:30 Mike

按鈕ID已更改，因此無法觸發事件。你可以使用jQuery「。上（）「函數，而不是」。點擊（）」，該事件將觸發連元件在將來創建

例如，

$('#like_' + pid).on("click",function(){ 
    alert("The button is clicked"); 
});

參考文獻：https://api.jquery.com/on/

來源

2014-02-27 02:44:15 Ben

點擊jQuery和AJAX只能工作一次

回答

相關問題