Как добавить вновь созданный элемент DOM в массив?

Question

У меня есть документ с динамическим пользовательским интерфейсом - пользователи могут добавлять строки в существующую форму ввода данных по мере необходимости, чтобы предоставить больше информации.

Я использую простой массив для отслеживания того, какие элементы находятся на экране, чтобы я мог запросить сохранение, но у меня возникли проблемы с выяснением, как добавить идентификатор нового элемента в мой массив. Логика, которая работает для существующих предметов:

$(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) к массиву мониторинга. Просто пытаемся свести работу команды к минимуму, чтобы реализовать это, даже после того, как они написали сценарии для работы пользовательского интерфейса.

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 изменяется без изменения количества элементов, он не сработает. Протестировано на Google Chrome 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 () от обработчика щелчков, вы также можете использовать его при отправке формы или других операциях.