Отображение изменения контента через родителя

У меня есть контент DHTML внутри fieldset, Это включает в себя обычный HTML, вложенные объекты (даже другие наборы полей) и изменение значения input, select, а также textarea объекты.

Я хотел бы изменить границу набора полей, если содержимое было изменено. Следующие работы:

$('fieldset[name=qsfs127]').children('input').change(function(){
    $(this).parent('fieldset').css({border:'1px solid red'});
})

Это обрабатывает ввод; Я могу расширить его, чтобы выбрать и textarea.

Вопросы:

  1. Как я могу сделать то же самое для изменений HTML?
  2. Может ли все это отслеживание изменений быть сделано путем сравнения текущего html() с сохраненным?
  3. Если да для (2), будет ли это обрабатывать случаи "отменить"?

Изменить: У меня есть кнопка, которая загружает содержимое ajax и сохраняет изменения. Затем я удаляю цвет границы

1 ответ

Решение

1.) Вы можете отслеживать изменения в HTML аналогично тому, как это делает плагин jQuery livequery. Плагин livequery оборачивает все методы манипуляции DOM jQuery, и когда любой из них вызывается, метод-обертка делает что-то особенное и затем возвращается к исходной функции. Это будет работать только для случаев использования обновления / отмены, при условии, что оба используют один из методов манипулирования DOM jQuery для изменения состояния.

$.each('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'html', function(i, funcName) {

   // Short-circuit if the method doesn't exist
   if (!$.fn[funcName]) return;

   // Save a reference to the original method
   var old = $.fn[funcName];

   // Create a new method
   $.fn[funcName] = function() {

      // Call the original method
      var r = old.apply(this, arguments);

      //Do something special here! Compare the stored html of the fieldset
      //to the new html state and update border accordingly

      // Return the original methods result
      return r;
   }
});

2.) Вы могли бы следить таким образом, кажется, немного тяжелыми руками. Без дополнительной информации о вашем сценарии использования и контроля данных трудно что-либо порекомендовать.

3.) Если вы сохранили значение исходного html() в наборе полей, кажется, что оно будет работать и для случая отмены. Вы также можете просто сравнить значение html() после отмены. Однако, если вы создаете кнопку "отменить", мне кажется, что вам нужно будет иметь некоторую историю всех изменений, и как только у пользователя не будет больше отмен, тогда они должны вернуться в исходное состояние и не сравнивать HTML () должно быть необходимо.

Другие вопросы по тегам