Hộp thoại Jquery - hộp thoại được thêm nhiều lần vào DOM

Question

Tôi đang sử dụng giao diện người dùng Jquery để hiển thị các tab. Trong một trong các tab, tôi có một hộp thoại. Nếu tôi điều hướng đến tab đó, mở hộp thoại, đóng hộp thoại, điều hướng khỏi tab rồi quay lại và mở hộp thoại, tôi kết thúc với nhiều phần tử HTML trùng lặp trong DOM.

Nói cách khác ...

Tôi đã có thiết lập trang chính của tôi với các tab:

<div id="groupTabs" style="width:600px; height:600px; display:none"> 
    <ul> 
     <li><a href="tab1.aspx"><span>Info</span></a></li> 
     <li><a href="tab2.aspx"><span>Associations</span></a></li> 
    </ul> 
</div> 

Tab # 2 chứa một hộp thoại:

<div id="dgEvent"> 
    <input id="someId"> 
</div> 

... 

$("#dgEvent").dialog(); 

Tôi đã thấy rằng nếu tôi mở hộp thoại, điều hướng đi (đến một tab khác) và ngược lại, lần sau tôi mở hộp thoại, tôi sẽ kết thúc với các phần tử trùng lặp được đặt tên là "someId" trong DOM của tôi. Điều này gây ra vấn đề bởi vì khi tôi cố gắng lấy giá trị từ someID (ví dụ, $ ("# someID"). Val(), tôi sẽ nhận được giá trị từ trường hợp đầu tiên của hộp thoại.)

Có một sửa chữa để đảm bảo rằng các trường được xóa khi hộp thoại đóng? Hoặc tốt hơn, rằng chúng được loại bỏ đúng cách khi điều hướng đến một tab khác?

EDIT

Cuối cùng, tôi tin rằng các vấn đề có liên quan đến việc sử dụng các Tabs và Dialog với nhau. Bất kỳ trường nào tôi có trên biểu mẫu nằm ngoài hộp thoại sẽ bị xóa khỏi DOM khi tôi điều hướng khỏi tab. Tuy nhiên, bất cứ điều gì trong hộp thoại vẫn còn trong DOM sau khi tôi điều hướng đi. Vì vậy, khi tôi điều hướng trở lại, tôi kết thúc với các bản sao.

Answer 1

Thay vì $("#dgEvent").dialog();, hãy thử tạo hộp thoại để nó không tự động mở, sau đó sử dụng mở và đóng để hiển thị/ẩn hộp thoại:

$("#dgEvent").dialog({ autoOpen: false }); 
$("#dgEvent").dialog('open'); 
$("#dgEvent").dialog('close'); 

Xem phần tổng quan về các jQuery UI Dialog page, mà tài liệu tham khảo this blog post.

Answer 2

Tôi đã có trải nghiệm tương tự.
Sự cố của tôi đã xảy ra do có cửa sổ bật lên <div> bên trong một updatepanel.
Sau cuộc gọi ajax, một bản sao mới sẽ được tạo.
Để giải quyết vấn đề này, chỉ cần tránh đặt bật lên <div> bên trong một updatepanel.
Thay vào đó, hãy đặt updatepanel trong cửa sổ bật lên <div>.
Hy vọng điều đó sẽ hữu ích.

Answer 3

Dường như hộp thoại đang được nhân bản bởi jQuery UI và được đặt ở phần cuối của DOM, trước khi đóng hộp thoại cố loại bỏ nó từ DOM

$("#dgEvent").remove(); 

cần khắc phục sự cố.

Answer 4

Sử dụng

$('#your-dialog').dialog('destroy').remove(); 

Phá hủy các hộp thoại và sau đó loại bỏ các div với nó là trẻ em từ DOM với remove().

Trân trọng.