Отображение изменения контента через родителя
У меня есть контент DHTML внутри fieldset
, Это включает в себя обычный HTML, вложенные объекты (даже другие наборы полей) и изменение значения input
, select
, а также textarea
объекты.
Я хотел бы изменить границу набора полей, если содержимое было изменено. Следующие работы:
$('fieldset[name=qsfs127]').children('input').change(function(){
$(this).parent('fieldset').css({border:'1px solid red'});
})
Это обрабатывает ввод; Я могу расширить его, чтобы выбрать и textarea.
Вопросы:
- Как я могу сделать то же самое для изменений HTML?
- Может ли все это отслеживание изменений быть сделано путем сравнения текущего html() с сохраненным?
- Если да для (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 () должно быть необходимо.