2015-08-08 14 views
7

Khi tôi nhấp vào thẻ liên kết, hình ảnh sẽ chuyển từ div#left thành div#right. Tôi muốn hình ảnh được sao chép. Đây có phải là hành vi mặc định của prepend() không? Làm thế nào tôi có thể tránh được vấn đề này?Làm cách nào để tôi có thể ngăn không cho jQuery thêm() xóa HTML?

Hình ảnh chỉ là trình giữ chỗ cho div lớn với nhiều trẻ em.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-2.1.0.min.js"></script> 
    <script type="text/javascript" src="Scripts/JavaScript.js"></script> 
</head> 
<body> 
    <div id="left" style="float:left"> 
     <img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/> 
    </div> 
    <div id="right" style="float:right"></div> 
    <a id="addImageToRight" href="#">Add Image toRight</a> 
</body> 
</html> 

Các jQuery là:

$(document).ready(function() { 
    $("#addImageToRight").click(function() { 
     var $image = $("#left img"); 
     var imgCopy = $image; 
     $("div#right").prepend(imgCopy); 
    }); 
}); 
+1

'imgCopy' không phải là bản sao. Nó là cùng một đối tượng. – njzk2

Trả lời

12

Đây có phải là hành vi mặc định của giao diện người dùng() không?

Có. Đặt một nút DOM ở đâu đó trong tài liệu yêu cầu xóa nó khỏi bất cứ nơi nào trong tài liệu mà nó đã có. Nó không thể tồn tại ở hai nơi cùng một lúc.

var imgCopy = $image; 

Đó bản sao giá trị của $image-imgCopy. Giá trị là một tham chiếu cho đối tượng. (Trong JavaScript, các biến chỉ có thể chứa mọi tham chiếu đến các đối tượng).

Làm cách nào để tránh sự cố này?

Tạo bản sao của nút DOM. Gọi .clone() trên đối tượng jQuery và thêm vào giá trị trả về.

var imgCopy = $image.clone(); 
+0

Lời giải thích hay. Cảm ơn – Karthik

+0

Tôi tin rằng bạn cũng có thể lưu trữ nó làm tài sản của một đối tượng, sẽ không được cập nhật khi bản gốc đã được cập nhật. Ví dụ: 'img = {}; img.copy = $ image; '. Bạn có thể cần phải sao chép nó vào một đối tượng khác để ngăn không cho nó tham chiếu: 'imgCopy = {}; imgCopy.copy = img.copy;'. Ngoài ra, tên của bạn có lẽ nên sáng tạo hơn tôi. – trysis

+0

@trysis - Điều đó không có ý nghĩa. Bạn chỉ cần sao chép các tham chiếu đến các đối tượng khác nhau (và có nhiều mã khó hiểu hơn). Bạn không bao giờ sao chép chính nút DOM. – Quentin

3

Có lẽ hãy xem jQuery clone() để tạo bản sao của phần tử img.

Các vấn đề liên quan