Custom div attribute catch changes

Question

I have a div with custom attribute posx

<div class="js__scroll__canvas" posx="0">

Another js plugin set dynamic value to posx on scroll.

I try to catch posx is change.

$(".js__scroll__canvas").attr( "posx" ).change(function() {
    alert( "Handler for .change() called." );
});

Nothing alerts. How to catch it? Help please

Please make sure you included jquery library or not? And another thing in console any error occurs? — Sudharsan S, Nov 18 '16 at 10:45
in your html i will see the class js__scroll but you used in the jquery codes js__scroll__canvas. Please check it first — Sudharsan S, Nov 18 '16 at 10:46
Sorry, my mistake, but doesn't work, js library is on, nothing errors. — Alex, Nov 18 '16 at 10:50
You may find your answer [here](http://stackoverflow.com/questions/16781778/detecting-attribute-change-of-value-of-an-attribute-i-made) — n4m31ess_c0d3r, Nov 18 '16 at 10:59

score 1 · Answer 1 · answered Nov 18 '16 at 11:04

1

You can try with setting up an event and triggering it while data gets updated. Please check below snippet if it can help you.

//Set up an event
$(".js__scroll__canvas").on('datachange', function(e, key){
     alert( "Handler for .datachange() called." );
});

// Then trigger it when you data gets updated 
$(".js__scroll__canvas").data('posx', 123).trigger('datachange');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js__scroll__canvas" posx="0">

answered Nov 18 '16 at 11:04

B. Dave

81
3

In your case, as it is changing dynamically, you can trigger it on scroll event I guess. – B. Dave Nov 18 '16 at 11:07
Is it possibility to change (e, key) to (ev, key), or (event, key) – Alex Nov 18 '16 at 11:20
Yes, you can change it to any text. – B. Dave Nov 18 '16 at 11:24

score 0 · Answer 2 · answered Nov 18 '16 at 10:59

<div class="js__scroll__canvas" posx="0">

$(".js__scroll__canvas").attr( "posx" ) return a string "0". So, it cannot be used as a selector to call change method.

If you want to log, try to create a function:

var logging = function () {
    console.log('the attribute has been changed.');
};

var dowork = function () {
    // try to update attribute    
    $(".js__scroll__canvas").attr( "posx", "1" );

    // logging
    logging();
};

Custom div attribute catch changes

2 Answers2