我在模块中有一个表单,我想在模态窗口中出现。根据id,窗口可能为空,或者如果它显示任何内容,则删除所有类和ID,因此我无法验证或设置表单样式。
截断代码: ...
<div id="feedback">
<div class="feedbackinner">
<!-- form module -->
<div id="contact-wrapper">
<!--form elements with ids and classes-->
</div>
<!-- end module -->
</div><!-- end .feedbackinner -->
</div><!-- end #feedback -->
这会触发没有任何ID或类的模态窗口(使用Firefox Web Developer大纲当前元素):
<a href="#contact-wrapper" class="modal" rel="{handler: 'clone', clone: 'contact-wrapper'}">Click for ugly unstyled form that won't validate</a>
这会触发一个空白的模态窗口:
<a href="#feedback" class="modal" rel="{handler: 'clone', clone: 'feedback'}">Click if you like staring at a blank white box</a>
所以最重要的是如何将所有id和类保留在模态窗口中,为什么不调用父div?
(作为一种解决方法,我将表单移动到组件视图,然后使用handler: 'iframe'
而不是克隆来调用它。我仍然想知道模态窗口发生了什么。)
谢谢!
答案 0 :(得分:3)
没有看到代码,但在元素上使用Element.clone
的含义是显而易见的。根据HTML的性质,id
应该是唯一的。这意味着您不应该同时将多个具有相同ID的元素注入到DOM中。
MooTools通过隐式删除它创建克隆的任何元素中的id来正确反映情绪:
https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L860
.clone
方法接受可选参数,允许您覆盖内容:
clone: function(contents, keepid){
- 请参阅http://mootools.net/docs/core/Element/Element#Element:clone。
克隆元素也会丢失您可能分配给它们的所有事件(但cloneEvents
可以帮助解决这些问题。)
我建议查看squeezebox实现并仔细检查克隆是否以预期的方式实现。更好的做法可能是采用和重新附加元素 - 或复制整个innerHTML(尽管这会再次导致非委托事件失败)。