如何將新創建的DOM元素添加到數組中？

我有一個具有動態UI的文檔 - 用戶可以根據需要將行添加到現有的數據輸入表單中以提供更多信息。如何將新創建的DOM元素添加到數組中？

我正在使用一個簡單的數組來跟蹤屏幕上的項目，所以我可以提示保存，但我無法弄清楚如何將新項目的ID添加到我的數組中。對於現有項目運作的邏輯是

$(document).ready(function() { 
    $('.monitor').each(function() { 
     monitorIds.push($(this).attr('id')); 
     monitorValues.push($(this).val()); 
    }); 
});

我希望能夠做的東西沿着這些路線，但無法找到一個合適的方式來做到這一點：（我知道，這不工作中，作爲「活」法不與事件定義）

$('.monitor').live(function() { 
    monitorIds.push($(this).attr('id')); 
    monitorValues.push($(this).val()); 
});

我見過的liveQuery插上，但我已經深入到插件地獄，希望避免增加另一個一。有沒有更好的辦法？

編輯：我不清楚一點 - 我試圖保持在一個單獨的腳本，並動態地做到這一點，而不是更新每個腳本，可能會添加元素也調用函數添加元素添加到監控陣列。只是爲了儘量減少團隊的工作來實現這一點，甚至在他們編寫腳本來完成UI工作之後。

來源

2011-10-17 reallyJim

這聽起來像你深入到你的項目，但類似於http：//www.knockoutjs。 com可能會在未來派上用場。 –

其中是向DOM添加新元素的代碼... – Esailija

由於NodeList是一個活的集合，我們可以聽元素的添加/刪除這樣的：

(function(){ 
var a = document.getElementsByTagName("*"), elmCount = a.length; 

    window.setInterval( 
     function(){ 
     var curCount = a.length; 

      if(curCount !== elmCount) { 
      jQuery(document).trigger("DOMChange"); 
      elmCount = curCount; 
      } 
     }, 
    200); 


})(); 

jQuery(document).bind("DOMChange", 
    function(e){ 
    console.log("domchange"); 
    } 
);

缺點是，如果沒有DOM元素數改變的變化，也不會觸發。在此頁面的谷歌瀏覽器14上進行測試。

而且，應該會更有效做的，而不是建立新的jQuery對象是：

$('.monitor').each(function() { 
     monitorIds.push(this.id); 
     monitorValues.push this.value); 
    });

來源

2011-10-17 17:13:37 Esailija

*這是*爲什麼我需要提高自己的寫作技巧 - 所以我不留下東西！「來自代碼的各個地方」實際上應該是指整個應用程序中的各種頁面/表單。這是我正在尋找的那種想法。 – reallyJim

好的，我刪除了那句話:) – Esailija

哦，沒問題！剛剛意識到我並不完全清楚。（也是我認爲開發者不應該寫文檔的原因） – reallyJim

爲什麼不只是寫了一個名爲getMonitorData函數並調用它需要

function getMonitorData() { 
    var monitorData = { monitorIds: [], monitorValues: [] }; 

    $('.monitor').each(function() { 
     monitorData.monitorIds.push($(this).attr('id')); 
     monitorData.monitorValues.push($(this).val()); 
    }); 
    return monitorData; 
}

時用於添加到每一個添加按鈕

var globalMonitorData; 

$(document).ready(function() { 
    $(".myAddNewButton").click(function() { 

    // add your new stuff to the DOM HERE 

    globalMonitorData = getMonitorData(); 
    }); 
});

但是從單擊處理分離getMonitorData（）你也可以在表單提交或其他操作時使用它。

來源

2011-10-17 16:46:28

事情是，可以在任何地方啓用此邏輯 - 正在尋找一種不將其添加到應用程序中的每個「添加新行」方法的方法 - 我將這個添加到我的問題 – reallyJim

使每個添加新行的工作代碼將簡單化，而不是重複如果您使用jQuery。看看我的更新 –

好吧，我在那裏表現得很怪異 - 我看到你的評論沒有看到答案的更新（幾分鐘）。我看到你在做什麼，但是真的試圖找到一種方式（也許是魔術獨角獸），不要修改「添加新行項目」代碼來處理這個問題 - 我想我可以在整個應用程序中使用它沒有太大困難。 – reallyJim

如何將新創建的DOM元素添加到數組中？

回答

相關問題