jquery 检测数据-更改时

dvtswwa3 于 2023-06-29 发布在 jQuery

关注(0)|答案(2)|浏览(99)

我试图改变值的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。因为我想检测属性更改事件

jquery

来源：https://stackoverflow.com/questions/37203585/detect-data-on-change

2条答案

按热度按时间

vq8itlhq1#

不幸的是，你不能把事件挂接到数据属性上。在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" />

赞(0）回复(0）举报 2023-06-29

oprakyz72#

如果您正在寻找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>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 检测数据-更改时

2条答案

相关问题

热门标签

最新问答