如何将新创建的 DOM 元素添加到数组中?
我有一个带有动态 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 技术交流群。
发布评论
评论(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() 与单击处理程序分开,您还可以在提交表单或其他操作时使用它。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
由于
NodeList
是一个实时集合,我们可以像这样监听元素添加/删除:缺点是,如果 DOM 发生变化而元素计数没有变化,则不会触发。
在此页面上在 google chrome 14 上进行了测试。
另外,这样做应该比创建新的 jQuery 对象更有效:
Due to
NodeList
being a live collection, we can listen to element additions/removals like this: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: