.replaceWith() funziona solo una volta

Question

Sto cercando di implementare un sistema di reputazione degli utenti nel mio sito. Quindi puoi vedere il numero di ripetizione dopo il nome dell'utente ogni volta che interagisce (ad esempio, ogni volta che fa un commento). C'è anche un sistema di votazione che altera anche la reputazione dell'utente e voglio che il numero di ripetizione rispecchi tale cambiamento. Quindi sto chiamando un file attraverso ajax che restituisce il nuovo numero di ripetizione per quell'utente. Il file html/php è qualcosa di simile prima istanza (se fa un post):

echo '<div class="rep_user_id" id="rep_user_id_'.$posts_row['userid'].'"> '.$posts_row['user_rep'].'</div>'; 

e poi (se fa un commento):

echo '<div class="rep_user_id" id="rep_user_id_'.$com_row['userid'].'">'.$com_row['user_rep'].'</div>'; 

entrambi mi danno questo:

<div class="rep_user_id" id="rep_user_id_110">293</div> 

Poi i JS:

function change_reps() { 
var userid = $('.rep_user_id').attr('id').replace('rep_user_id_',''); 
$.ajax({ 
url: "vote/get_reputation.php", 
data: "userid="+userid, 
success: function(server_response){ 
$("body").ajaxComplete(function(event, request){ 
    var reputation = server_response; 
    $('#rep_user_id_'+userid).replaceWith(''+reputation); 
    $('#rep_user_id_'+userid).effect("highlight", {color:'red'}, 1000); 
}); } }); } 

Questa funzione viene chiamata dopo il successo di un altro ajax (per aggiornare rep e voti). Quindi, da ciò, che cosa funziona: una volta che faccio clic su qualsiasi freccia in alto o in basso, posso vedere il contatore delle votazioni su o giù, ma vedo solo la modifica dell'utente che cambia solo la prima istanza (post). Perché sta cambiando solo una volta e non nell'intero documento? Ha qualcosa da fare che la sezione commenti viene chiamata da un altro file (con un include)? Per tua informazione, l'effetto funziona in tutte le istanze! Spero che tu possa aiutare. Grazie

EDIT: Da quando ho visto che non mi sono spiegato molto bene, sto aggiungendo qualche altra riga. Il problema è che non posso modificare più elementi con lo stesso id e classe solo una volta (invece di cambiare un elemento più volte). Quindi ho 293 molte volte nella pagina ma il codice postato sta cambiando solo un elemento! Questo è ciò che fa scattare change_reps():

$("body").on("click", ".vote_com_up", function(){ 
    var com_id = $(this).attr('id').replace('vote_com_up_',''); 
    $.ajax({ 
    url: "vote/comment_vote.php", 
    data: "com_action=2&com_id="+com_id, 
    success: function(server_response){ 
    $(".vote_com_number").ajaxComplete(function(event, request){ 
    if(server_response == 'voted') 
     { alert("Ya has votado en este post!");} 
    else{ 
     var new_com_votes = server_response; 
     $("#vote_com_number_"+com_id).html(+new_com_votes); 
    } }); } 
    }).done(function() { 
    change_reps(); 
    }); 
    return false; 
}); 

ho fatto un piccolo jsfiddle per mostrare quello che voglio:

http://jsfiddle.net/CMgYb/1/

SOLUZIONE: Bryan Naegele aveva ragione: avevo bisogno di classi invece di iD.

Answer 1

Probabilmente ha qualcosa a che fare con il fatto che si sta selezionando un ID che catturerà la prima occorrenza di quell'ID. Devi usare le classi.

Answer 2

Stai l'accesso a questo elemento da id, quindi sostituendolo con qualcosa di nuovo. L'unico modo in cui questo funzionerà una seconda volta è se quello con il quale lo si sostituisce ha lo stesso id di prima; Immagino che non sia così.

Sei sicuro di non voler impostare la contenuti di questo elemento con la funzione html:

$('#rep_user_id_' + userid).html('' + reputation); 

EDIT

Guardando più da vicino il vostro PHP, lo fa apparire come se lo avessi codificato per sostituire effettivamente l'intero div. Tuttavia, ti consiglio di non codificare il tuo PHP per generare gli ID degli elementi corretti. Prendi in considerazione la possibilità di abbattere questo PHP in modo da inviare solo il contenuto del div. Quindi puoi usare molto più semplicemente html come sopra.

Answer 3

Secondo la documentazione jQuery:

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.

Ciò significa che quando si esegue:

$('#rep_user_id_'+userid).replaceWith(''+reputation); 

Si cambia:

<div class="rep_user_id" id="rep_user_id_110">293</div> 
//to 
293 

Così la seconda volta spara l'ajax non riesce a trovare l'id rep_user_id. Il modo più semplice per risolverlo sarebbe cambiare il innerHTML con text() (nota: è anche possibile utilizzare hml() ma in questo caso lo text() funziona meglio perché non ci sono tag html).

$('#rep_user_id_'+userid).text(reputation);