Khi thực hiện một .replaceVới() trong jQuery, các ràng buộc sự kiện không được giữ nguyên

Question

Đây là một ví dụ được cô đặc.

Hãy nhớ rằng lớp .chat-reply có trình xử lý sự kiện nhấp chuột được liên kết với nó.

HTML (Reply Button):

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

chức năng jQuery này được gọi là khi ai đó nhấp khác nút đó gửi một thông điệp đến máy chủ để được lưu trong cơ sở dữ liệu. Điều này được thực hiện thông qua ajax và được thực hiện thành công. Trong sự thành công nói trên .ajax()() gọi lại chức năng này được gọi là:

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

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

Các 'dữ liệu' trong khi gọi lại thành công trên sẽ thay thế toàn bộ div .container bao gồm cả con nút .chat trả lời. Sau hàm replaceWith() này, sự kiện click không còn bị ràng buộc với nút nữa.

Về mặt logic, tôi đang cố gắng để người dùng cuối đăng thông báo lên dòng thời gian, sau đó hiển thị thông báo đó trong dòng thời gian mà không cần cần làm mới màn hình.

Answer 1

Quyết định về một giải pháp khá không-để-tao nhã một phần nhờ vào bài đăng này: Events not registering after replaceWith

Tôi tạo ra một chức năng gọi là wireUpChatReply() mà liên kết với một sự kiện click vào nút .chat trả lời.

Sau khi thay thế bằng(), tôi thực hiện cuộc gọi đến wireUpChatReply() để rebind các sự kiện.Tôi thực hiện cuộc gọi này với wireUpChatReply trên document.ready.

Nó không đẹp nhưng nó hoạt động.

Answer 2

Grab jquery 1.7 mà bây giờ sử dụng 'bật' để ràng buộc: http://blog.jquery.com/2011/09/28/jquery-1-7-beta-1-released/

Hoặc nếu < 1,7 sử dụng 'sống' thay vì 'ràng buộc' vì nó sẽ tìm kiếm những thay đổi DOM và áp dụng lại các sự kiện của nội dung đã thay đổi . Nếu không, bạn có thể đăng ký lại sự kiện trên cuộc gọi lại của mình.

Api cũ để thay thế để liên kết với trình xử lý sự kiện loại trực tiếp sau khi thay đổi DOM.

$ (selector) .live này (sự kiện, fn)

trở thành $ (document) .Trên này (sự kiện, chọn, fn)

Hoặc trong mã

Điều này

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

Trở thành điều này trong 1.7

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

Với các tùy chọn khác nhau để chọn đối tượng bạn muốn.

Answer 3

Trong handler nhấp chuột của bạn, sử dụng .Trên() như là một đại biểu thay

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

sự kiện sẽ 'bong bóng' lên đến container, và nếu nó phù hợp với a.chat-replay nó sẽ kích hoạt.

Answer 4

Hai câu trả lời liên quan đến sự kiện trực tiếp không khắc phục được sự cố, vì chính vùng chứa được thay thế và sự kiện ràng buộc đã biến mất.

Thay vì rebinding các sự kiện, trong trường hợp bạn cần phải biết những sự kiện đã bị ràng buộc, bạn có thể làm như sau:

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

hoặc, nếu có một số container:

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