.replaceWith() działa tylko raz

Question

Próbuję wdrożyć system reputacji użytkowników w mojej witrynie. Możesz więc zobaczyć numer rep po imieniu użytkownika za każdym razem, gdy on wchodzi w interakcje (na przykład za każdym razem, gdy robi komentarz). Istnieje również system głosowania, który również zmienia reputację użytkownika i chcę, aby numer rep odzwierciedlał tę zmianę. Tak więc wywołuję plik przez ajax, który zwraca nowy numer rep dla tego użytkownika. Plik html/php jest coś takiego pierwszej instancji (jeśli robi post):

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

a następnie (jeśli robi komentarza):

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

zarówno daj mi to:

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

Następnie 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); 
}); } }); } 

Ta funkcja jest wywoływana po sukcesie innego ajaxa (w celu aktualizacji rep i głosów). Tak więc, od tego, co działa: po kliknięciu dowolnej strzałki w górę lub w dół widzę licznik głosów w górę lub w dół, ale widzę, że użytkownik rep zmienia tylko pierwszą instancję (post). Dlaczego zmienia się tylko raz, a nie w całym dokumencie? Czy ma coś do zrobienia, że ​​sekcja komentarzy jest wywoływana z innego pliku (z dołączeniem)? Dla efektu FYI działa we wszystkich przypadkach! Mam nadzieję, że możesz pomóc. Dzięki

EDIT: Odkąd widziałem, że nie wyjaśniłem się bardzo dobrze, dodaję kilka linii. Problem polega na tym, że nie mogę modyfikować wielu elementów o tym samym identyfikatorze i klasie tylko raz (w przeciwieństwie do wielokrotnego zmieniania jednego elementu). Więc mam 293 wiele razy na całej stronie, ale opublikowany kod zmienia tylko jeden element! To, co wyzwala 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; 
}); 

zrobiłem mały jsfiddle aby pokazać to, co chcę:

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

ROZWIĄZANIE: Bryan Naegele miał rację: Potrzebowałem klas zamiast ids.

Answer 1

Prawdopodobnie ma to związek z wyborem identyfikatora, który pobierze pierwsze wystąpienie tego identyfikatora. Musisz użyć klas.

Answer 2

masz dostęp ten element przez id, następnie zastąpienie go z czymś nowym. Jedynym sposobem, który zadziała po raz drugi, będzie to, że to, co go zastąpisz, ma ten sam identyfikator, co wcześniej; Zgaduję, że tak nie jest.

Czy na pewno nie chcesz, aby ustawić zawartość tego elementu z html funkcję:

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

EDIT

Przyglądając się bliżej swojej PHP, to wygląda tak jakbyś to zakodował, żeby faktycznie zastąpić cały div. Mimo to, polecam przeciw kodowaniu twojego PHP, by wygenerować poprawne identyfikatory elementów. Rozważ przycięcie tego PHP w dół, aby przesłać po prostu element div. Wtedy możesz po prostu użyć html jak wyżej.

Answer 3

Zgodnie z docs jQuery:

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

Oznacza to, że gdy zrobisz:

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

To zmienia:

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

Więc po raz drugi odpala ajax nie może znaleźć id rep_user_id. Najprostszym sposobem rozwiązania tego problemu jest zmiana innerHTML za pomocą text() (uwaga: można również użyć hml(), ale w tym przypadku text() działa lepiej, ponieważ nie ma znaczników html).

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