tl; dr: Làm cách nào để có được một phần tử DOM được hiển thị bởi trình xử lý nhấp chuột phần tử trước khi đóng của body ngay cả khi các yếu tố được tạo động được thêm vào?jQuery - tạo thành phần tử cuối cùng trong DOM (trước khi đóng phần thân) ngay cả sau các phần tử được tạo động
Về cơ bản, tôi muốn có lần nhấp mở phần tử cũng di chuyển nó trong DOM để cuối cùng trước khi cơ thể đóng ngay cả sau khi một số yếu tố động đã được nối.
Sự cố của tôi bắt nguồn từ một phương thức đang được mở trong một phương thức khác trong khi có nhiều phương thức trên một trang. Một bắt là các submodals tồn tại trong DOM khi tải trang trong khi các modals chính đang được khởi tạo onclick (các submodals sử dụng mã khác nhau để tạo ra trong khi các submodals sử dụng jQuery UI dialog).
Nếu bạn mở một phương thức và sau đó mở tất cả các submodal là tốt. Nếu bạn mở một phương thức thứ hai, sau đó đóng nó lại khi bạn mở lại phương thức đầu tiên, submodal sẽ không xuất hiện khi nó được ẩn bên dưới phương thức thứ hai. Nếu tôi gắn các submodals này vào cơ thể, do đó đặt chúng sau khi bất kỳ phương thức được tạo nào chúng xuất hiện tốt (nhưng điều đó tạo ra các vấn đề khác). Mặc dù có vẻ như đây không phải là vấn đề chỉ mục z (tôi đã thử mọi thứ liên quan đến điều đó mà không có may mắn), nó dường như liên quan đến nơi các modals này được định vị trong DOM.
Mã có thể rõ ràng hơn:
Đây là những gì html trông giống như trên tải trang:
<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>
Sau khi bạn nhấp vào để mở cửa sổ modal tiểu học đầu tiên:
<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>
Sau bạn bấm vào để mở modal của submodal tôi phải di chuyển submodal để được dưới các phương thức chính nếu không nó sẽ không xuất hiện (và một lần nữa, z-index không ảnh hưởng đến việc chặn này):
$('#submodal_1').insertAfter('#primary_modal_1');
Tại thời điểm này nếu bạn đóng số #primary_modal_1 nó sẽ bị ẩn nhưng vẫn còn trong DOM. Nếu bạn mở một giây mã bây giờ sẽ trông giống như:
<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>
Tại thời điểm này nếu bạn mở lại các phương thức chính đầu tiên và cố gắng mở submodal của nó submodal sẽ không xuất hiện. Tuy nhiên, nếu bạn di chuyển mô hình con xuống dưới phương thức chính cuối cùng, như vậy:
<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>
Submodal sẽ phát hiện chính xác. Tôi muốn đảm bảo rằng các submodals luôn luôn là cuối cùng trong DOM, bất kể có bao nhiêu modals chính được nối thêm.
Tính năng này hoạt động tốt đối với các yếu tố đã có trong DOM nhưng không hoạt động đối với các yếu tố được thêm động. Các modals được bổ sung động sẽ là cuối cùng trong DOM khi chúng được tạo. – Stuart
Tôi đang làm việc trên một JSFiddle ... – FMaz008
Xong, bạn có thể kiểm tra JSfiddle cho một POC :) – FMaz008