javascript - 使用 Javascript 和 mootools 附加到动态创建的 div

Question

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

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

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

加载 dom 后，将调用“构建器”类:

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);
  }

产量:

"Uncaught TypeError: Cannot call method 'appendChild' of null"

我不确定如何解决这个问题。我觉得我想附加到的 div 在我尝试附加到它时不存在。但是，我看不出有什么方法可以生成一个事件来告诉我它何时存在，这样我就可以将任何“子”div 的构建推迟到那个时候

Answer 1

没错。你做的几件事不是 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 尚未注入(inject) dom。

等等。阅读手册/api - 您始终可以使用 native js，但这违背了使用为您修复问题的库的目的。

顺便说一句，做你正在做的事情并不容易，我目前正在和我的一个 friend (好吧，同事!)一起开发一个form-b​​uilder(用于 mootools , AMD)，它或多或少会做你可能想做的事情——输入类型、组、由值触发的无限依赖(在所有 el 类型上)、各种表单元素和自定义外观/感觉、验证器、默认值、占位符、自定义事件.. 模型/ Controller 类似行为、默认值、服务器端数据/验证、每个输入数据持久化(sessionStorage/window.name)

使用 AMD 构建器 list 创建，这些 list 支持通过 Twitter Bootstrap 标记和元素进行版本控制、分页和语言，以及通过主题标签创建的单页 Restful 应用程序……基本上，这确实是一项艰巨的任务。

如果我们决定将其开源(我希望我们可以)，并且人们有兴趣，谁知道呢 - 您几乎可以构建诸如交互式测试、调查猴子、快速表单、复杂表单之类的东西...它的可扩展性和灵 active 。希望我们完成它....