Question

当另一个div的数据attr改变时，我正试图改变div的值。我正在努力做到这一点

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

但它登录控制台：

未捕获的TypeError：无法读取未定义的属性“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并且当星级费率更改时我想要检测并传入我的模型（隐藏式控件）

EDITED

我这样做：

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

但是在第二次点击div后它可以正常工作。因为我想检测属性更改事件

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

检测数据变化

1 个答案: