Как я могу наблюдать за содержимым тега 'a' - jquery - PullRequest
Новая
       6

Как я могу наблюдать за содержимым тега 'a' - jquery

13 голосов
/ 01 марта 2011

У меня есть пустой тег <a>, в который загружается контент через внешний фрагмент javascript.Я хочу наблюдать за <a> и при изменении его содержимого выполнять еще одну задачу.Содержание будет меняться только один раз.

Можно ли это сделать?

Я также использую jQuery.

Заранее спасибо

Ответы [ 4 ]

6 голосов
/ 01 марта 2011

Вы можете использовать смесь из jQuery && События DOM уровня 3 (см. Поддержку браузера ниже).

Если вы хотите проверить изменения в содержимое , вы можете сделать это: 

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

Хотя приведенное выше решение на самом деле довольно удобно для меня, оно будет работать только в браузере, который поддерживает эти события.Чтобы получить более общее решение, вы можете подключить в методы установки 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-узлу.

5 голосов
/ 01 марта 2011

Вы можете попробовать отслеживать .html () тега, чтобы увидеть, не изменится ли он на что-то еще ...

Возможно, есть функция timed (выполняющаяся каждые n-секунд), которая контролирует содержимое (.html ()) элемента, пока он не изменится, а затем не прекратит его мониторинг.Может быть, что-то в духе: 

var monitor = true;
var doMonitor = function() {
  monitor = $("#theanchor").html() != "the initial value";
  if (monitor)
    setTimeout(doMonitor,500);
};
setTimeout(doMonitor,500);

Теоретически это должно работать, но я не проверял это.

3 голосов
/ 01 марта 2011

Вы можете использовать событие DOMSubtreeModified .Это событие вызывается при изменении содержимого элемента. 

$('a').bind('DOMSubtreeModified', function() {
    // contents changed   
});

Примечание: это событие не срабатывает в Opera и более старых версиях IE (хотя работает в IE9).

Демонстрационная версия: http://jsfiddle.net/simevidas/pLvgM/

0 голосов
/ 01 марта 2011

Что вы имеете в виду содержание тега?Вы можете сделать это так: 

$('#linkElementID').html();

или получить такой атрибут: 

$('#linkElementID').attr("title"); //Title Attribute 
$('#linkElementID').attr("href"); //href Attribute etc etc

Я не думаю, что есть событие, которое вызывается при изменении тегаСобытие .change() вызывается только областями ввода и списками выбора.

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

...