detect data- on change

Question

I'm trying to change value of div when data attr of another div will change. I'm trying to do that

$('.language-rate').attr("data-rate-value").on('change', function () {
    $('.language-d').text($('.language-rate').attr("data-rate-value"));
});

but it logs in console:

Uncaught TypeError: Cannot read property 'on' of undefined

How can I do that?

my view is:

               @using (Ajax.BeginForm("LanguagesTable", new AjaxOptions()
                {
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "languages"
                }))
                {
                    <div class="language-content">
                        @Html.TextBoxFor(m => m.newLanguages.LanguageName, new { @class = "pcontent-left main-color" })
                        <div class="rate language-rate"></div>
                        @Html.HiddenFor(m => m.newLanguages.Star, new { @class = "language-d" })
                    </div>

                    <div class="add-education">
                        <button type="submit" name="pcprograms" value="add" class="add-education-button-sm">add</button>
                    </div>
                }

I'm using rater js and when star rate changes i want to detect and pass in my model (which is hidden form controll)

EDITED

I'm doing that:

$('.language-rate').on('change', function () {
    $('.language-d').text($('.language-rate').attr("data-rate-value"));
});

but it works after second click on div. because i want to detect attribute change event

share html as well and clarify what you want to do and what to expect.like how will the data attr of that another div change? — guradio, May 13 '16 at 07:17
@guradio I'm using rater js. It's complex html (asp.net mvc razor) and because didn't post it — gsiradze, May 13 '16 at 07:19
This might help: http://stackoverflow.com/questions/16781778/detecting-attribute-change-of-value-of-an-attribute-i-made — user3297291, May 13 '16 at 07:20
The `.on()` method is available on jQuery objects, but you're calling it on the return value of `.attr()`, which will either be `undefined` or a string. The `'change'` event that you're trying to use applies to DOM elements (form elements), not to element attributes. — nnnnnn, May 13 '16 at 07:20
@nnnnnn I'm trying `change` too but it works after second click. — gsiradze, May 13 '16 at 07:23
The `'change'` event is triggered by changes to a form element's value, not by changes to an element's attributes. Does the rater.js library that you're using trigger any events (custom events, perhaps) when the rating is updated? — nnnnnn, May 13 '16 at 07:36
@nnnnnn yeah it changes data-rate-value attribute of my `.language-rate` class — gsiradze, May 13 '16 at 07:44

score 0 · Answer 1 · answered May 16 '16 at 17:45

Unfortunately you cannot hook an event onto a data attribute.There are a lot of posts about this on SO and other sources.What you can do is create a function which runs often (e.g. every 200 milliseconds) and checks if the the value of the data attribute of your div has changed.Here's an example, i hope it helps you:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var _old = $("#test").attr('data-value');

        setInterval(function () {
            var _new = $("#test").attr('data-value');

            if(_old != _new)
            {
                alert('The data attribute of the div has been changed to - ' + _new);
                _old = _new;
            }

        }, 200);

        $("#changeData").click(function () {
            $("#test").attr('data-value',new Date().toLocaleTimeString());
        });

    });
</script>
<div id="test" data-value="Test">
</div>
<input type="button" id="changeData" value="Change Data Attribute" />

score 0 · Answer 2 · answered Jun 23 '23 at 04:16

This question still ranks high if you're looking for DOM change handling.

Nowadays you can use pretty performant classes like MutationObserver

You can easily hook into the change of data-rate_value with the following code snippet:

// fake data attribute change
const node = document.getElementById("example")

const set_to_five = () => {
  node.dataset["rate_value"] = "5"
}

const set_to_one = () => {
  node.dataset["rate_value"] = "1"
}

// continuously change data attribute
setInterval(() => {
  set_to_five()

  setTimeout(set_to_one, 2500)
}, 5000)

const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach((mutation) => {
    console.log(mutation);
  });
})

observer.observe(node, {
  attributes: true, // this can be omitted
  attributeFilter: ["data-rate_value"]
});

<div id="example" style="background-color: red; width: 100px; height: 100px;"></div>

detect data- on change

2 Answers2