使用javascript和mootools追加動態創建的div

使用mootools我有一個'builder'類來製作表單對象，動態創建div。某些表單對象由多個不同的對象組成。例如，選擇對象具有一個過濾選擇器內容的文本框和一個用於保存選擇的按鈕。使用javascript和mootools追加動態創建的div

在這種情況下，我希望過濾器框和按鈕位於一個div中，該div被附加到整個表單對象的div上以便具有「包裝器」。

但是，我有問題附加到動態創建的表單對象的div。

在DOM被加載後，將「助洗劑」類被稱爲：

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

生成器創建一個新的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被保存爲一個成員variabl e，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錯誤，說我試圖追加到「空」

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直到該點

來源

2012-05-29 rocketas

'getElementById'只接受一個字符串作爲參數，似乎你傳遞一個引用。 – PanterA

沒錯。你做的幾件事情不是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中。

等等。閱讀manual/api - 你總是可以使用本地js，但這種做法違背了使用一個爲你解決問題的庫的目的。

在一個側面說明，做你正在做的事情不是很容易，我目前正在與我的一個朋友（以及同事！）在form-builder（對於mootools，AMD）可能會想要做的，或多或少 - 輸入類型，組，由值（所有el類型）觸發的無限依賴項，各種表單元素和自定義外觀/感覺，驗證器，默認值，佔位符，自定義事件。模型/控制器類似的行爲，默認值，服務器端數據/驗證，持續每輸入數據（sessionStorage/window.name）

獲得創建與AMD建設者清單，支持版本，通過哈希的單頁寧靜應用程序標籤...基本上，這是一個很大的任務。

如果我們決定開源它（我希望我們可以）和ppl有興趣，誰知道 - 你幾乎可以建立像交互式測試，測量猴子，快速表單，複雜形式等任何東西它...它的可擴展性和靈活性。希望我們完成它....

來源

2012-05-29 21:30:23

非常感謝指針。事實證明，我在其他地方有一些AJAX問題，等等，但我現在要100％mootools！祝你好運，表單生成器，並張貼一些評論，如果你有開放源代碼的話。我很想看看它 – rocketas

嘗試發送「form_obj」參數給getElementById而不是div本身。該錯誤似乎表明在當前使用的方法中不能在DOM中找到div。 getElementById將目標div的id屬性作爲字符串。

例如

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

來源

2012-05-29 19:13:19 Brian

對不起，讓我修改。 form_obj.div.id – Brian

謝謝你指出。在這種情況下將div ID提供給getElementById不會產生錯誤，但子div不會出現在DOM中。我在調查 – rocketas

頁面完成加載後，嘗試打開您的Javascript控制檯並自己運行選擇器，以查看問題是否與選擇器或時間有關： >> document.getElementById（「expected_div_id」） – Brian

getElementById只需要string parameter。它返回null，因爲您正在將對元素的引用傳遞給該方法。
我建議你擺脫getElementById。只需使用已有的參考號div即可將元素附加到該元素。

form_obj.div.appendChild(this.div);

希望它有幫助。

來源

2012-05-29 19:30:21 PanterA

Gotcha ，謝謝。這其實有一個更深的問題。我使用getElementById發佈了這個問題，但我之前嘗試過使用該參考。 – rocketas

我得到Uncaught TypeError：無法調用未定義的方法'appendChild'。 – rocketas

但是，對我來說，getElementById是愚蠢的，因爲我沒有傳遞一個字符串 – rocketas

使用javascript和mootools追加動態創建的div

回答

相關問題