Question

我有一个带有动态UI的文档 - 用户可以根据需要在现有数据输入表单中添加行，以提供更多信息。

我正在使用一个简单的数组来跟踪屏幕上的项目，因此我可以提示保存，但是我无法弄清楚如何将新项目的ID添加到我的数组中。适用于现有项目的逻辑是

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

我希望能够沿着这些方向做一些事情，但找不到合适的方法:(我知道这不起作用，因为'live'方法没有定义事件）

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

我已经看过LiveQuery插件，但由于我已经深入插件地狱，所以希望避免添加另一个。还有更好的方法吗？

编辑：我不清楚一点 - 我试图将它保存在一个单独的脚本中，并动态执行，而不是更新可能添加元素的每个脚本也调用函数来添加元素（s）到监控阵列。只是尝试将团队的工作保持在最低水平以实现这一点，即使在他们编写脚本来完成UI工作之后也是如此。

Answer 1

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

Answer 2

为什么不写一个名为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（）与click处理程序分开，您也可以在提交表单或其他操作时使用它。

如何将新创建的DOM元素添加到数组中？

2 个答案: