jQuery event on attribute change

Question

I need a function to run when a divs data-page-index attribute changes

  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');
    });

I tried the change() function but that only seems to work with input fields,

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

is there another way of achieving this? Thanks.

I used this the other day, http://meetselva.github.io/attrchange/ pretty decent plugin. — Christos Hrousis, Jul 01 '14 at 01:35
check the answer here http://stackoverflow.com/questions/16781778/detecting-attribute-change-of-value-of-an-attribute-i-made — techie_28, Oct 18 '16 at 06:55

score 3 · Accepted Answer · answered Oct 18 '16 at 06:41

It seems that you still have to manipulate the DOM to trigger the event? If so, you can manipulate a hidden input's value instead of manipulating other elements' data attributes. Then you can use the change trigger.

  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');
  });

trigger:

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

jQuery event on attribute change

1 Answers1

Linked