Как я могу наблюдать содержимое тега 'a' - jquery
У меня есть пустой тег <a>
, содержимое которого загружается через внешний фрагмент javascript. Я хочу наблюдать за <a>
, и когда его изменение содержимого выполняет другую задачу. Содержимое будет меняться только один раз.
Можно ли это сделать?
Я также использую jQuery.
Заранее спасибо
Ответы
Ответ 1
Вы можете использовать смесь из jQuery && & События уровня DOM (см. ниже раздел поддержки браузера).
Если вы хотите проверить какие-либо изменения в контенте, вы можете сделать это:
var $a = $('a');
$a.one('DOMNodeInserted', function(e) {
console.log('content changed!: ', e);
console.log('new content: ', $(this).html());
});
$a.one('DOMAttrModified', function(e) {
console.log('attribute changed!: ');
console.log('attribute that was changed: ', e.attrName);
});
Смотрите этот код в действии: http://jsfiddle.net/wJbMj/1/
Ссылка: DOMNodeInserted, DOMAttrModified
В то время как вышеупомянутое решение на самом деле довольно удобно для меня, оно будет работать только в браузере, который поддерживает эти события. Чтобы получить более общее решение, вы можете подключиться к методам set jQuerys. Недостатком этого решения является то, что вы только поймаете изменения, которые были сделаны с помощью jQuery.
var _oldAttr = $.fn.attr;
$.fn.attr = function() {
console.log('changed attr: ', arguments[0]);
console.log('new value: ', arguments[1]);
return _oldAttr.apply(this, arguments);
};
Вы можете подключиться к .text()
и .html()
точно так же. Вам нужно будет проверить, соответствует ли значение this
внутри перезаписанных методов правильным DOM-кодом.
Ответ 2
Вы можете попробовать отслеживать .html() тега, чтобы узнать, изменилось ли оно на что-либо еще...
Возможно, у вас есть функция времени (выполняется каждые n секунд), которая контролирует содержимое (.html()) элемента до тех пор, пока оно не изменится, а затем перестанет его контролировать. Возможно, что-то в духе:
var monitor = true;
var doMonitor = function() {
monitor = $("#theanchor").html() != "the initial value";
if (monitor)
setTimeout(doMonitor,500);
};
setTimeout(doMonitor,500);
В теории это должно работать, но я его не тестировал.
Ответ 3
Вы можете использовать событие DOMSubtreeModified. Это событие срабатывает у элемента при его изменении.
$('a').bind('DOMSubtreeModified', function() {
// contents changed
});
Примечание. Это событие не срабатывает в Opera и более старых версиях IE (оно работает в IE9, хотя).
Live demo: http://jsfiddle.net/simevidas/pLvgM/
Ответ 4
Как вы относитесь к содержимому тега? Вы можете сделать это так:
$('#linkElementID').html();
или получить такой атрибут:
$('#linkElementID').attr("title"); //Title Attribute
$('#linkElementID').attr("href"); //href Attribute etc etc
Я не думаю, что есть событие, которое срабатывает при изменении тега, событие .change()
запускается только с помощью областей ввода и выбора списков.
Вам нужно будет проверить после события, загружающего вновь вставленный контент.