detect data- on change
<p>I'm trying to change value of div when data attr of another div will change. I'm trying to do that</p>

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

<p>but it logs in console:</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'on' of undefined</p>
</blockquote>

<p>How can I do that?</p>

<p>my view is:</p>

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

                    &lt;div class="add-education"&gt;
                        &lt;button type="submit" name="pcprograms" value="add" class="add-education-button-sm"&gt;add&lt;/button&gt;
                    &lt;/div&gt;
                }
</code></pre>

<p>I'm using <a href="http://auxiliary.github.io/rater/" rel="nofollow">rater js</a> and when star rate changes i want to detect and pass in my model (which is hidden form controll)</p>

<p><strong>EDITED</strong></p>

<p>I'm doing that:</p>

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

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