jQuery - tạo thành phần tử nổi gắn với một phần tử khác

Question

Tôi đang sử dụng this Plugin xác thực biểu mẫu jQuery. Nó cho thấy các lỗi trường trong một div nổi nhỏ mà là rất tốt.

Sự cố phát sinh khi div lỗi được hiển thị và sau đó phần tử tương ứng với việc di chuyển ra khỏi vị trí ban đầu của nó. Ví dụ nếu ở trên một hộp đầu vào I .show() một phần tử đã bị ẩn trước đó, nó sẽ đẩy đầu vào xuống, nhưng dấu nhắc lỗi cho đầu vào đó sẽ được giữ nguyên.

Làm cách nào để làm cho thẻ div thả nổi vào/theo yếu tố tương ứng của nó?

Mã cho plugin này là here và các ví dụ là here.

Answer 1

Plugin đang sử dụng vị trí tuyệt đối cho các thông báo lỗi.

Nếu bạn đang thêm các phần tử DOM khác di chuyển vị trí trường nhập tương ứng với tài liệu, thì bạn sẽ cần đặt lại thủ công tất cả xác thực < của div > sau khi tập lệnh của bạn sửa đổi DOM chạy.

Bạn có thể thử sử dụng phương thức bù đắp jQuery() http://api.jquery.com/offset/ để lấy vị trí mới của phần tử đầu vào tương ứng với tài liệu và sau đó tinh chỉnh thuộc tính trên cùng và bên trái của < của div >.

Đây là một .jsFiddle hiển thị cho bạn những gì tôi có nghĩa là: http://jsfiddle.net/ysQCf/2/

css

.errorMessage 
{ 
    background-color: red; 
    position: absolute; 
    left: 180px; 
    top: 25px; 
} 

p 
{ 
    display: none; 
} 

html

<p id="hidden">if you display this the textbox will move down</p> 
<input id="myInput" type="text" /> 
<div class="errorMessage">stick me to the div</div> 
<br /> 
<input id="show" type="button" value="Show" /> 

javascript

$(function() { 
    $("#show").click(function() { 
     // Save the offset of the error against the input 
     var offset = $(".errorMessage").offset(); 
     offset.left -= $("#myInput").offset().left; 
     offset.top -= $("#myInput").offset().top; 

     // Call your script to manipulate the DOM 
     $("#hidden").show(); 

     // Move the error div to it's new position 
     offset.left += $("#myInput").offset().left; 
     offset.top += $("#myInput").offset().top; 
     $(".errorMessage").offset(offset) 
    }); 
});