jQuery 对话框的工作方式是将对话框的 HTML 从 DOM 中的当前位置取出,并在 DOMdiv
底部放置一个新的 HTML。当您打开对话框时,您的新位置定义如下。
因此您的 HTML 不在原来的位置,并且您的选择器使用find
不会找到任何东西。
您必须id
直接使用或类名,但如果该类有多个元素,则最好使用标识符。
我们在项目中所做的工作是为对话框制作一个带有 id 的新 div,然后我们知道它是哪一个。您可以将实际内容放入新容器中,clone()
也可以将其放入其中。与此类似:
var $dialog = $('<div id="dialog-container"></div>')
var $content = $(this).parents('.shipping_sector').find(".shipping_dialog");
var $clonedContent = $(this).parents('.shipping_sector').find(".shipping_dialog").clone() // use clone(true, true) to include bound events.
$dialog.append($content); // or $dialog.append($clonedContent);
$dialog.dialog();
但这意味着您还必须稍微重组您的代码来处理它。
此外,当对话框被销毁时,它不会再次将 HTML 移回找到它的位置,因此我们必须手动将其放回原处。请注意,我们使用的是 jQuery 1.7,我不知道这在 1.9 中是否仍然是同样的问题。
对话框很难处理,但如果你使用类似于上面的东西div
,例如创建一个自定义并给它一个唯一的 id,你就有很大的自由度。
打开对话框时新 HTML 的外观:
<div style="display: block; z-index: 1003; outline: 0px; position: absolute; height: auto; width: 300px; top: 383px; left: 86px;"
class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-1">Contact form</span>
<a
href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span>
</a>
</div>
<div class="shipping_dialog ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 91.03125px; height: auto;"
scrolltop="0" scrollleft="0">
<p>appear now</p>
</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"
style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1000;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1000;"></div>
</div>