0

我有一个带有动态 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 插件，但由于我已经深入插件地狱，希望避免添加另一个插件。有没有更好的办法？

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

4

2 回答 2

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 发生变化而元素数没有变化，它不会触发。在此页面上的 google chrome 14 上进行了测试。

此外，这样做应该比创建新的 jQuery 对象更有效：

$('.monitor').each(function () {
        monitorIds.push( this.id );
        monitorValues.push this.value );
    });
于 2011-10-17T17:13:37.670 回答
0

为什么不直接编写一个名为 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-17T16:46:28.517 回答