Podczas wykonywania .replaceWith() w jQuery powiązania zdarzeń nie są zachowywane.

Question

Oto skondensowany przykład.

Należy pamiętać, że klasa .chat-reply ma przypisaną obsługę zdarzenia kliknięcia.

HTML (Odpowiedz przycisk):

<div class="container"> 
    <a href="#" class="btn small chat-reply">Reply</a> 
</div> 

Ta funkcja jQuery jest wywoływana, gdy ktoś kliknie inny przycisk, który wysyła komunikat do serwera mają być zapisane w bazie danych. Odbywa się to za pośrednictwem ajax i odbywa się pomyślnie. W wyżej wymienionym .ajax() sukces() callback funkcja ta nazywa się:

$.ajax({ 
     type  : 'GET', 
     url  : '/some_controller/some_method', 
     success : function(data) { 

     $('.container').replaceWith(data); 
    } 
}); 

do „danych” w zwrotnego sukcesu powyżej zastąpi całą .container div tym dzieckiem przycisk .chat-post. Po tym replaceWith() zdarzenie click nie jest już powiązane z przyciskiem.

Logicznie rzecz biorąc, ja próbuje mieć użytkownik końcowy Wiadomości do osi czasu, a następnie mają tę wyświetlania wiadomości na osi czasu bez, która chciałaby, aby odświeżyć ekran.

Answer 1

zdecydował się na rozwiązanie, a nie tak eleganckie, dzięki w części do tego postu: Events not registering after replaceWith

stworzyłem funkcję o nazwie wireUpChatReply(), który wiąże zdarzenie click do przycisku .chat-post.

Następnie po replaceWith(), wykonuję wywołanie metody wireUpChatReply() w celu ponownego powiązania zdarzeń.Wykonuję to samo połączenie z wireUpChatReply na document.ready.

To nie jest ładne, ale działa.

Answer 2

Grab jQuery 1.7, który używa teraz „na” związać: http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

Lub jeśli < 1,7 stosowanie „na żywo” zamiast „wiążą”, jak to będzie wyglądać na zmiany DOM i ponownie ubiegać się o wydarzeniach zmienionej treści . Jeśli nie, możesz ponownie zastosować wydarzenie na swoim oddzwonieniu.

Stara api do zastąpienia w celu powiązania z procedurami obsługi zdarzeń na żywo po zmianach DOM.

to $ (selektor) .live (zdarzenia, fn)

Staje się to $ (document) .Na (wydarzenia, selektor, fn)

Lub w kodzie

Ten

$(".container a.chat-reply").live("click", function(){ 
// do it live! 
}); 

staje się to w 1.7

$(".container").on("click", "a.chat-reply", function(event){ 
// do it live! 
}); 

Z różnymi opcjami wyboru obiektu, który chcesz.

Answer 3

W swojej click obsługi, użyj .on() jako delegat zamiast

$("div.container").on("click", "a.chat-reply", function(even){ 
    //click handler here 
}); 

imprezy będzie 'bańka' do pojemnika, a jeśli pasuje a.chat-replay będzie wyzwalać.

Answer 4

Dwie odpowiedzi dotyczące wydarzeń na żywo nie rozwiązują problemu, ponieważ sam pojemnik jest zastępowany, a wiązanie zdarzenia zniknęło.

Zamiast ponownego wiązania zdarzeń, w takim przypadku musisz znać już związany wydarzenia, można wykonać następujące czynności:

$(".container").parent().on("click", ".container a.chat-reply", function(){ 
    // do something 
}); 

lub, jeśli istnieje kilka pojemników:

$(document.body).on("click", ".container a.chat-reply", function(){ 
    // do something 
});