.replaceWith() trabajando una sola vez

Question

Estoy intentando implementar un sistema de reputación de usuarios en mi sitio. Para que pueda ver el número de representante después del nombre del usuario cada vez que interactúa (por ejemplo, cada vez que hace un comentario). También hay un sistema de votación que también altera la reputación del usuario y quiero que el número de representante refleje ese cambio. Así que estoy llamando a un archivo a través de ajax que devuelve el nuevo número de representante para ese usuario. El archivo html/php es algo como esto la primera instancia (si hace un post):

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

y luego (si hace un comentario):

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

tanto me da esto:

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

A continuación, el 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); 
}); } }); } 

Esta función se llama después del éxito de otro ajax (para actualizar el representante y los votos). Entonces, a partir de esto, lo que funciona: una vez que hago clic en cualquier flecha hacia arriba o hacia abajo puedo ver el contador de votos hacia arriba o hacia abajo, pero solo veo que el representante del usuario cambia la primera instancia solamente (publicación). ¿Por qué está cambiando solo una vez y no en todo el documento? Tiene algo que ver con que la sección de comentarios se llame desde otro archivo (con un include)? ¡FYI el efecto funciona en todos los casos! Espero que puedas ayudar. Gracias

EDIT: Como he visto que no me explicaba muy bien, estoy agregando algunas líneas más. El problema es que no puedo modificar múltiples elementos con la misma identificación y clase solo una vez (en lugar de cambiar un elemento varias veces). Así que tengo 293 muchas veces en toda la página, pero el código publicado solo cambia un elemento. Esto es lo que desencadena 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; 
}); 

he cometido un pequeño jsFiddle para mostrar lo que quiero:

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

SOLUCIÓN: Bryan Naegele tenía razón: necesitaba clases en lugar de IDS.

Answer 1

Probablemente tiene algo que ver con el hecho de que está seleccionando una ID que captará la primera aparición de esa ID. Necesitas usar clases.

Answer 2

Usted está accediendo a este elemento por Identificación, entonces reemplazarla con algo nuevo. La única forma en que esto funcionará por segunda vez es si lo que lo reemplaza tiene la misma identificación que antes; Supongo que no.

¿Estás seguro de que no desea establecer el contenido de este elemento con la función html:

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

EDITAR

Mirando más de cerca su PHP, que tiene un aspecto como si hubieras codificado esto para reemplazar realmente el div completo. Sin embargo, recomendaría no codificar tu PHP para generar los ID de elemento correctos. Considere recortar este PHP para que solo envíe el contenido del div. Entonces puede usar mucho más simplemente html como arriba.

Answer 3

De acuerdo con la documentación de jQuery:

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

Lo que esto significa es que cuando se hace:

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

Cambia:

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

Así que la segunda vez dispara el ajax no puede encontrar el id rep_user_id. La forma más fácil de resolver esto sería cambiar innerHTML con text() (nota: también puede usar hml() pero en este caso text() funciona mejor porque no hay etiquetas html).

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