Làm cách nào để di chuyển html từ div này sang div khác với Jquery mà không vi phạm javascript

Question

Tôi có hai div cho các phần khác nhau của trang web, một phần hoạt động và tham chiếu. Một là kích thước cố định, cái còn lại có kích thước thay đổi và chúng được xếp chồng lên nhau theo chiều dọc. Tôi đang cố gắng thiết kế nó để nếu bạn muốn làm việc trên một cái gì đó trong khung tham chiếu, bạn bấm vào một liên kết và nó hoán đổi tất cả dữ liệu giữa hai panes. Ý tưởng của tôi là làm như sau:

var working = $("#working_pane").html(); 
var ref = $("#reference_pane").html(); 

$("#working_pane").html(ref); 
$("#reference_pane").html(working); 

Vấn đề với điều này có vẻ như bất kỳ javascript nào được tham chiếu bên trong các ô này (ví dụ, trong trình chỉnh sửa địa điểm) đều bị hỏng khi chuyển đổi. Không có lỗi javascript xảy ra, nó chỉ là không có gì xảy ra, như các mối quan hệ javascript bị hỏng.

Có cách nào để di chuyển html mà không vi phạm javascript chứa không?

Answer 1

Khi bạn đang làm việc với các bit của tài liệu HTML, bạn nên làm việc với các đối tượng Nút mà là nội dung khi trình duyệt nhìn thấy nó, không phải chuỗi HTML.

Để nhận HTML, trình duyệt phải xem xét các nút và nối tiếp chúng vào một chuỗi. Sau đó, khi bạn gán HTML đó cho một phần khác của tài liệu (với innerHTML hoặc jQuery html(...)), bạn đang yêu cầu trình duyệt hủy tất cả nội dung trước đây trong phần tử, phân tích cú pháp chuỗi HTML trở lại thành một bộ đối tượng Nút mới và chèn các Nút mới này vào phần tử.

Đây là chậm, lãng phí, và mất bất kỳ khía cạnh của các đối tượng Node gốc mà không thể được thể hiện dưới dạng HTML serialized, chẳng hạn như:

• xử lý sự kiện chức năng/thính giả (đó là lý do tại sao các biên tập viên của bạn breaking)
• tài liệu tham khảo biến mã JavaScript khác có đến Nodes (còn phá vỡ kịch bản)
• giá trị trường mẫu (ngoại trừ, một phần, trong IE do một lỗi)
• thuộc tính tùy chỉnh

Vì vậy - và điều này áp dụng cho dù bạn đang sử dụng jQuery hoặc DOM đơn giản - không ném HTML xung quanh! Lấy các đối tượng nút ban đầu và chèn chúng vào nơi bạn muốn chúng (chúng sẽ rời khỏi vị trí ban đầu chúng được tự động). Các tham chiếu vẫn nguyên vẹn nên các script sẽ tiếp tục hoạt động.

// contents() gives you a list of element and text node children 
var working = $("#working_pane").contents(); 
var ref = $("#reference_pane").contents(); 

// append can be given a list of nodes to append instead of HTML text 
$("#working_pane").append(ref); 
$("#reference_pane").append(working); 

Answer 2

Điều này có thể xảy ra có thể do các id trùng lặp. về cơ bản bạn có thể có một phần tử trong một div có id = id1 bây giờ điều này được lưu trữ trong một var và được tiêm vào một div mới. hiện tại có vẻ như bạn không có cơ chế để đảm bảo rằng bạn không có id trùng lặp cùng một lúc. điều này có thể phá vỡ js

Vì vậy, hãy xem xét điều này và nếu bạn đảm bảo các yếu tố được lưu trữ lần đầu tiên trong var thì bản gốc sẽ bị xóa và sau đó được thêm vào vị trí mới.