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

发布于 12-10 09:39 字数 714 浏览 0 评论 0原文

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

我使用一个简单的数组来跟踪屏幕上的项目,以便提示保存,但我无法弄清楚如何将新项目的 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 工作的脚本。

I have a document with a dynamic UI--users can add rows to an existing data entry form as needed to provide more information.

I'm using a simple array to track what items are on the screen so I can prompt for save, but I'm having trouble figuring out how to add the ID of the new item to my array. The logic that works for existing items is

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

I was hoping to be able to do something along these lines, but can't find a suitable way to do it: (I'm aware that this doesn't work, as the 'live' method isn't defined with an event)

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

I've seen the LiveQuery plug in, but as I'm already deep into plugin hell, was hoping to avoid adding yet another one. Is there a better way?

EDIT: I wasn't clear about one point--I'm trying to keep this in a separate script, and do it dynamically, rather than update each script that might add elements to also call a function to add the element(s) to the monitoring array. Just trying to keep the work of the team to a minimum to implement this, even after they've written scripts to do the UI work.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

漆黑的白昼2024-12-17 09:39:07

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

Due to NodeList being a live collection, we can listen to element additions/removals like this:

(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");
    }
);

Downside is that if the DOM changes without the element count changing, it won't trigger.
Tested on google chrome 14 on this very page.

Also, it should be slightly more efficient to do this instead of creating new jQuery objects:

$('.monitor').each(function () {
        monitorIds.push( this.id );
        monitorValues.push this.value );
    });
薄荷梦2024-12-17 09:39:07

为什么不直接编写一个名为 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() 与单击处理程序分开,您还可以在提交表单或其他操作时使用它。

Why not just write a function called getMonitorData and call it when needed

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

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

For adding to every Add New Button

var globalMonitorData;

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

    // add your new stuff to the DOM HERE

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

But by separating the getMonitorData() from the click handler you can also use it when form is submitted or other operations.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文