javascript - 检测数据变化

Question

当另一个 div 的数据属性发生变化时，我试图更改 div 的值。我正在尝试这样做

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

但它登录控制台:

Uncaught TypeError: Cannot read property 'on' of undefined

我怎样才能做到这一点？

我的观点是:

               @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>
                }

我正在使用rater js当星级发生变化时，我想检测并传递我的模型(隐藏形式控件)

已编辑

我正在这样做:

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

但它在第二次单击 div 后起作用。因为我想检测属性更改事件

Answer 1

不幸的是，您无法将事件 Hook 到数据属性上。SO 和其他来源上有很多关于此的帖子。您可以做的是创建一个经常运行的函数(例如每 200 毫秒)并检查是否您的div的data属性值已更改。这是一个示例，希望对您有所帮助:

<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" />