如何将新创建的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元素添加到数组中？

回答

相关问题