Событие jQuery при изменении атрибута

Мне нужна функция для запуска, когда атрибут divs data-page-index изменяется

  var active = $('.swipeview-active'),
      dpi =  parseInt(active.attr('data-page-index')),
      left = $('[data-page-index="' +prev+ '"]').children("img").eq(0),
      right = $('[data-page-index="' +next+ '"]').children("img").eq(0);

    $(active.attr('data-page-index')).change(function(){

    right.clone( true ). css({'z-index': 5}). fadeIn(2000).appendTo('#right');
    left.clone( true ). css({'z-index': 5}). fadeIn(2000).appendTo('#left');
    });

Я попробовал функцию change(), но, похоже, работает только с полями ввода,

    $(active.attr('data-page-index')).change(function(){

есть ли другой способ достижения этого? Спасибо.

ОТВЕТЫ

Ответ 1

Кажется, вам все равно придется манипулировать DOM, чтобы вызвать событие? Если это так, вы можете манипулировать скрытым входным значением, а не манипулировать атрибутами данных других элементов. Затем вы можете использовать триггер change.

  var active = $('.swipeview-active'),
      dpi =  parseInt(active.attr('data-page-index')),
      left = $('[data-page-index="' +prev+ '"]').children("img").eq(0),
      right = $('[data-page-index="' +next+ '"]').children("img").eq(0),
      dpiInput = $('.swipeview-active input:hide');

  dpiInput.change(function(){
    right.clone( true ). css({'z-index': 5}). fadeIn(2000).appendTo('#right');
    left.clone( true ). css({'z-index': 5}). fadeIn(2000).appendTo('#left');
  });

триггер:

$('.swipeview-active input:hide').val(1).trigger('change');