jQuery e AJAX su clic funziona solo una volta

Sto provando a fare un button simile / diverso con jQuery e Ajax. Il problema è che quando mi piacciono qualcosa che non posso contrastare fino a quando non aggiorno la pagina, e se diverso da qualcosa, non posso più piacere di nuovo finché non aggiornare la pagina.

Ecco il mio 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 --> <? } } ?> 

Il mio 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; ?>"); }); }); }); 

Ho messo questo codice ovunque detto <!--jQuery Script here--> o <!--More jQuery-->

Tutto su una pagina. Non ho alcun PHP di errori di javascript, quindi non so cosa c'è.

Mi aiuti per favore.

PS: Sono un principiante in jQuery quindi per favore non rendere la tua risposta troppo complicata.

Grazie.

Il tuo evento non viene collegato agli elementi che vengono aggiunti dynamicmente dopo il caricamento della pagina. Prova la delega degli events. Inoltre, poiché each volta cambia l'id del button, è ansible utilizzare il selettore di caratteri jolly come mostrato sotto Utilizza

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

invece di

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

e allo stesso modo lo cambia come per troppo.

Il problema è che la modifica dell'ID solo che: modifica l'id, ma i gestori di events per l'id non vengono assegnati automaticamente

Invece di modificare l'ID dell'elemento, modificare un altro attributo, ad esempio una class e in questo modo non è necessario applicare nuovamente il gestore di events click e puoi utilizzare un unico gestore di events per gestire TUTTI i pulsanti simili o diversi dal posto anziché loop sopra di loro, che sembra quello che stai facendo. E invece di inserire un numero univoco nell'ID, è ansible utilizzare l'attributo data modo che non si debba preoccuparsi di estrarre l'integer dalla string (poiché gli ID non possono iniziare con gli interi). Infatti, puoi lasciare completamente il PHP dal tuo JavaScript.

Ad esempio, se hai il seguente HTML:

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

Dove "come" è per un button a piacere e "a differenza" è per un button diverso. Quindi puoi fare quanto segue:

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

Anche se questo non è direttamente correlato alla tua domanda. È sempre una buona abitudine usare le istruzioni preparate con query parametrizzate mysqli, anche se i valori vengono dal database o da una fonte che si ritiene affidabile. Ad esempio, la tua variabile $pid va direttamente nella tua query che ti apre agli attacchi SQL injection. Basta prepararsi con query parametrizzate e non preoccuparti di ciò che entra nel tuo database.

L'id del button viene modificato in modo che l'evento non possa essere triggersto. È ansible utilizzare la function jQuery ".on ()" anziché ".click ()", l'evento verrà triggersto anche se l'elemento viene creato in futuro.

Per esempio,

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

Riferimento: https://api.jquery.com/on/