检测数据变化答案

【问题标题】：detect data- on change检测数据变化
【发布时间】：2016-05-13 07:17:00
【问题描述】：

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

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

但它会登录控制台：

未捕获的类型错误：无法读取未定义的“on”属性

我该怎么做？

我的看法是：

               @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 后起作用。因为我想检测属性更改事件

【问题讨论】：

也分享 html 并阐明您想要做什么以及期望什么。比如另一个 div 的数据属性将如何变化？
@guradio 我正在使用评估器 js。这是复杂的html（asp.net mvc razor），因为没有发布它
这可能会有所帮助：stackoverflow.com/questions/16781778/…
.on() 方法可用于 jQuery 对象，但您在 .attr() 的返回值上调用它，该值将是 undefined 或字符串。您尝试使用的 'change' 事件适用于 DOM 元素（表单元素），而不适用于元素属性。
'change' 事件由表单元素值的更改触发，而不是由元素属性的更改触发。当评分更新时，您使用的 rater.js 库是否会触发任何事件（可能是自定义事件）？

标签： javascript jquery asp.net-mvc

【解决方案1】：

不幸的是，您无法将事件挂钩到数据属性。在 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" />

【讨论】：