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

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

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

$(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, но, поскольку я уже глубоко в аду плагинов, надеялся избежать добавления еще одного. Есть ли способ лучше?

РЕДАКТИРОВАТЬ: я не был ясен по одному вопросу - я пытаюсь сохранить это в отдельном сценарии, и сделать это динамически, а не обновлять каждый сценарий, который может добавлять элементы, чтобы также вызвать функцию для добавления элемента (ов) к массиву мониторинга. Просто пытаемся свести работу команды к минимуму, чтобы реализовать это, даже после того, как они написали сценарии для работы пользовательского интерфейса.

Источник

2 ответа

Решение

Из-за 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 );
    });
Источник

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

Источник
Другие вопросы по тегам