JQuery .data() không hoạt động?

Question

Gần đây tôi đã được mã hóa đi, và tôi chạy vào một vấn đề lạ. Tôi đã cố gắng gán một thuộc tính dữ liệu cho một phần tử mới mà tôi đã tạo (thông qua jQuery), chỉ để khám phá ra nó sẽ không thực sự gán thuộc tính. Xem các liên kết dưới đây để biết một ví dụ, các mã được liệt kê dưới đây:

http://jsfiddle.net/y95p100c/1/

Bất cứ ý tưởng tại sao điều này đang xảy ra? Tôi chưa bao giờ vấp vào này ...

var div = $("<div />") 
$(div).data("foo", "bar") 
console.log($(div)[0].outerHTML) // prints <div></div> 

Answer 1

data không thiếtdata-* thuộc tính. Nó quản lý bộ nhớ cache dữ liệu không liên quan đến thuộc tính data-*. Nó khởi tạo từ các thuộc tính data-* nếu có bất kỳ quà tặng nào, nhưng không bao giờ viết cho chúng. Để ghi vào một thuộc tính, hãy sử dụng attr.

Ví dụ: Updated Fiddle

var div = $("<div />") 
$(div).attr("data-foo", "bar") 
console.log($(div)[0].outerHTML) 

gì bạn nhìn thấy chỉ là một trong nhiều cách này có thể gây ngạc nhiên. Một là nếu đánh dấu của bạn là <div id="elm" data-foo="bar"></div> và tại một số điểm bạn sử dụng $("#elm").data("foo") để lấy giá trị (và nó sẽ thực sự được "bar"), sau đó bạn làm $("#elm").data("foo", "update"), thuộc tính vẫn data-foo="bar" nhưng dữ liệu bằng cách data quản lý hiện nay có foo bằng "update". Nhưng quy tắc trên giải thích: data không bao giờ viết đến data-* attrs.

Answer 2

jQuery nhập khẩu thuộc tính data- khi phần tử được tải, nhưng không truy cập vào phần tử sau đó. Các phần tử được lưu trữ trong một cấu trúc bên trong jQuery. Từ the API:

Các data- thuộc tính được kéo trong lần đầu tiên sở hữu dữ liệu được truy cập và sau đó không còn truy cập hoặc đột biến (tất cả các giá trị dữ liệu này sau đó được lưu trữ nội bộ trong jQuery).