Как я могу наблюдать содержимое тега '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() запускается только с помощью областей ввода и выбора списков.

Вам нужно будет проверить после события, загружающего вновь вставленный контент.