1

使用 mootools 我有一个 'builder' 类，它制造表单对象，动态创建 div。一些表单对象由几个不同的对象组成。例如，一个选择对象具有一个用于过滤选择器内容的文本框和一个用于保存选择的按钮。

在这种情况下，我希望过滤器框和按钮位于附加到整个表单对象的 div 的 div 中，以便具有“包装器”。

但是，我在附加到动态创建的表单对象的 div 时遇到问题。

加载 dom 后，调用 'builder' 类：

window.addEvent('domready', function()
{
builder = new Build();
});

Builder 这样创建一个新的 div

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

然后它创建表单对象，该对象将 div 作为其参数之一

var form_obj = superSelector(div);

在 form_obj 构造函数内部，这个 div 被保存为一个成员变量，this.div = div。过滤器文本框以及按钮被创建。

这是我看到问题的地方。（由于过滤器文本框和按钮的问题相同，我将仅描述文本框的情况）

form_obj 的 div 被传递给过滤器文本框的构造函数。创建过滤器文本框时，它会为自己创建一个 div

 var div = document.createElement('div');
 var div_id = 'the_div_id_for_my_filter_box';

当我尝试将此 div 附加到 form_obj 的 div 时，我收到一个 js 错误，说我正在尝试附加到“null”

 var filterBox = new Class({
 initialize: function(name, form_obj)
 { 
   this.name = name;

   this.div = document.createElement('div');
   this.div.setAttribute('id', name);

   document.getElementById(form_obj.div).appendChild(this.div);
  }

产量：

“未捕获的 TypeError：无法调用 null 的方法‘appendChild’”

我不知道如何解决这个问题。我觉得我想附加的 div 在我尝试附加到它时并不存在。但是，我看不到生成一个事件的方法，它告诉我它何时确实存在，以便我可以将任何“子”div 的构建推迟到那时

4

3 回答 3

2

对。你做的几件事不是mootoolsy。

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

应该：

var div = new Element('div', {
    id: 'the_div_id_for_my_form_object'
}); // or even new Element('div#foobar'); 


div.setAttribute('id', div_id); -> div.set('id', div_id);

然后附加到dom：

document.getElementById(form_obj.div).appendChild(this.div);

为什么？你想做什么？抓取一个元素并添加到内存中的 div 中？

document.id(form_obj.div).inject(this.div); 
// if this element exist, it will be moved as a child to the new div, not safe
// you really ought to rewrite to:
var el = document.id(form_obj.div);
el && el.inject(this.div);

请记住，此时此 div 尚未注入到 dom 中。

等等。阅读手册/api - 你总是可以使用本机 js，但这违背了使用为你修复问题的库的目的。

附带说明一下，做你正在做的事情并不容易，我目前正在和我的一个朋友（嗯，同事！）一起做一些事情form-builder（对于 mootools，AMD），它可以做你可能想做的事情，或多或少 - 输入类型、组、由值触发的无限依赖（在所有 el 类型上）、各种表单元素和自定义外观/感觉、验证器、默认值、占位符、自定义事件.. 模型/控制器类行为，默认值，服务器端数据/验证，每个输入数据（sessionStorage / window.name）持久化

使用 AMD builder manifests 创建，支持版本控制、分页和语言，通过 twitter 引导标记和元素以及通过主题标签的单页 restful 应用程序......基本上，这确实是一项艰巨的任务。

如果我们决定开源它（我希望我们可以），并且人们有兴趣，谁知道 - 你几乎可以构建交互式测试、调查猴子、快速表单、复杂表单等东西......它的可扩展性和灵活性。希望我们完成它......

于 2012-05-29T21:30:23.413 回答
1

尝试将“form_obj”参数发送到 getElementById 而不是 div 本身。该错误似乎表明当前采用的方法无法在 DOM 中找到 div。getElementById 将目标 div 的 id 属性作为字符串。

例如

document.getElementById(form_obj).appendChild(this.div);
于 2012-05-29T19:13:19.410 回答
0

getElementById只接受一个字符串参数。它返回null是因为您将一个元素的引用传递给该方法。
我建议你摆脱getElementById. 只需使用您已经拥有的引用div即可将元素附加到。 

form_obj.div.appendChild(this.div);

希望能帮助到你。

于 2012-05-29T19:30:21.400 回答