检测数据的变化

detect data- on change

本文关键字：变化 数据 检测      更新时间：2023-09-26

当另一个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后就可以工作了。因为我想检测属性更改事件

不幸的是，您无法将事件挂接到数据属性上。SO和其他来源上有很多关于这方面的帖子。您可以创建一个经常运行的函数（例如，每200毫秒运行一次），并检查div的数据属性值是否发生了更改。这里有一个例子，我希望它能帮助你：

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

如果您正在寻找DOM更改处理，这个问题仍然很重要。

现在你可以使用像MutationObserver 这样性能很好的类

您可以使用以下代码片段轻松地钩住data-rate_value的更改：

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

相关文章：