jQuery Data () API를 사용하여 데이터 속성을 설정할 수 없습니다

jQuery Data () API를 사용하여 데이터 속성을 설정할 수 없습니다

---

MVC보기에 다음 필드가 있습니다.

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

별도의 js 파일에서 data-helptext속성을 문자열 값 으로 설정하고 싶습니다 . 내 코드는 다음과 같습니다.

alert($(targetField).data("helptext"));

$(targetField).data("helptext", "Testing 123");

alert()호출은 경고 대화 상자의 텍스트 "올드 텍스트"를 보여주고, 잘 작동합니다. 그러나 data-helptext특성을 "Testing 123" 으로 설정하기위한 호출이 작동하지 않습니다. "오래된 텍스트"는 여전히 속성의 현재 값입니다.

data () 호출을 잘못 사용하고 있습니까? 나는 이것을 웹에서 찾았는데, 내가 뭘 잘못하고 있는지 볼 수 없다.

HTML 마크 업은 다음과 같습니다.

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

---

설명서에 언급되어 .data()있습니다

데이터 속성은 데이터 속성에 처음 액세스 한 후 더 이상 액세스되거나 변경되지 않습니다 (모든 데이터 값은 내부적으로 jQuery에 저장 됨).

이것은 또한에 포함 된 해당 HTML 5의 데이터 - * 속성을 업데이트) jQuery를 $ .fn.data (에없는 변경 이유는 무엇입니까?

아래의 원래 답변에 대한 데모는 더 이상 작동하지 않는 것 같습니다.

업데이트 된 답변

다시, .data()문서에서

포함 된 대시가있는 속성 처리는 jQuery 1.6에서 W3C HTML5 사양을 준수하도록 변경되었습니다.

따라서 <div data-role="page"></div>다음은 사실입니다$('div').data('role') === 'page'

나는 그것이 $('div').data('data-role')과거에 일한 것이 확실 하지만 더 이상은 아닌 것 같습니다. 콘솔을 열지 않고 HTML에 기록하는 더 나은 쇼케이스를 만들었고 camelCase 데이터 속성 변환에 멀티 하이픈의 추가 예를 추가했습니다 .

업데이트 된 데모 (2015-07-25)

또한 참조 Attr의 대 jQuery를 데이터를?

HTML

<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
    <tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>

자바 스크립트 (jQuery 1.6.2+)

var $changeMe = $('#changeMe');
var $log = $('#log');

var logger;
(logger = function(setter, getter, note) {
    note = note || '';
    eval('$changeMe' + setter);
    var result = eval('$changeMe' + getter);
    $log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");

$('#changeData').click(function() {
    // set data-key to new value
    logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
    // try and set data-key via .attr and get via some methods
    logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
    logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
    logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");

    // bonus points
    logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
    logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
    logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");

    return false;
});

$('#changeData').click();

---

이전 데모

---

원래 답변

이 HTML의 경우 :

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

이 JavaScript (jQuery 1.6.2 포함)

console.log($('#foo').data('helptext'));

$('#changeData').click(function() {
    $('#foo').data('helptext', 'Testing 123');
//  $('#foo').attr('data-helptext', 'Testing 123');
    console.log($('#foo').data('data-helptext'));
    return false;
});

데모보기

은 Using 크롬 DevTools로 콘솔을 DOM을 검사하려면이 $('#foo').data('helptext', 'Testing 123'); 되지 않습니다 에서 볼 수 있듯이 값 갱신 콘솔 만 $('#foo').attr('data-helptext', 'Testing 123');수행합니다.

---

나는 심각한 문제가 있었다

.data('property', value);

data-property속성을 설정하지 않았습니다 .

jQuery를 사용하여 시작 .attr():

일치하는 요소 세트에서 첫 번째 요소의 속성 값을 가져 오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정하십시오.

.attr('property', value)

값을 설정하고

.attr('property')

값을 검색합니다.

이제는 작동합니다!

---

@andyb의 대답에는 작은 버그가 있습니다. 위의 그의 게시물에 대한 나의 의견에 더하여 ...

이 HTML의 경우 :

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

다음과 같이 속성에 액세스해야합니다.

$('#foo').attr('data-helptext', 'Testing 123');

그러나 다음과 같은 데이터 방법 :

$('#foo').data('helptext', 'Testing 123');

The fix above for the .data() method will prevent "undefined" and the data value will be updated (while the HTML will not)

The point of the "data" attribute is to bind (or "link") a value with the element. Very similar to the onclick="alert('do_something')" attribute, which binds an action to the element... the text is useless you just want the action to work when they click the element.

Once the data or action is bound to the element, there is usually* no need to update the HTML, only the data or method, since that is what your application (JavaScript) would use. Performance wise, I don't see why you would want to also update the HTML anyway, no one sees the html attribute (except in Firebug or other consoles).

One way you might want to think about it: The HTML (along with attributes) are just text. The data, functions, objects, etc that are used by JavaScript exist on a separate plane. Only when JavaScript is instructed to do so, it will read or update the HTML text, but all the data and functionality you create with JavaScript are acting completely separate from the HTML text/attributes you see in your Firebug (or other) console.

*I put emphasis on usually because if you have a case where you need to preserve and export HTML (e.g. some kind of micro format/data aware text editor) where the HTML will load fresh on another page, then maybe you need the HTML updated too.

---

Happened the same to me. It turns out that

var data = $("#myObject").data();

gives you a non-writable object. I solved it using:

var data = $.extend({}, $("#myObject").data());

And from then on, data was a standard, writable JS object.

---

To quote a quote:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

.data() - jQuery Documentiation

Note that this (Frankly odd) limitation is only withheld to the use of .data().

The solution? Use .attr instead.

Of course, several of you may feel uncomfortable with not using it's dedicated method. Consider the following scenario:

• The 'standard' is updated so that the data- portion of custom attributes is no longer required/is replaced

Common sense - Why would they change an already established attribute like that? Just imagine class begin renamed to group and id to identifier. The Internet would break.

And even then, Javascript itself has the ability to fix this - And of course, despite it's infamous incompatibility with HTML, REGEX (And a variety of similar methods) could rapidly rename your attributes to this new-mythical 'standard'.

TL;DR

alert($(targetField).attr("data-helptext"));

---

As mentioned, the .data() method won't actually set the value of the data- attribute, nor will it read updated values if the data- attribute changes.

My solution was to extend jQuery with a .realData() method that actually corresponds to the current value of the attribute:

// Alternative to .data() that updates data- attributes, and reads their current value.
(function($){
  $.fn.realData = function(name,value) {
      if (value === undefined) {
        return $(this).attr('data-'+name);
      } else {
        $(this).attr('data-'+name,value);
      }
  };
})(jQuery);

NOTE: Sure you could just use .attr(), but from my experience, most developers (aka me) make the mistake of viewing .attr() and .data() as interchangeable, and often substitute one for the other without thinking. It might work most of the time, but it's a great way to introduce bugs, especially when dealing with any sort of dynamic data binding. So by using .realData(), I can be more explicit about the intended behavior.

---

Had the same problem. Since you can still get data using the .data() method, you only have to figure out a way to write to the elements. This is the helper method I use. Like most people have said, you will have to use .attr. I have it replacing any _ with - as I know it does that. I'm not aware of any other characters it replaces...however I have not researched that.

function ExtendElementData(element, object){
    //element is what you want to set data on
    //object is a hash/js-object
    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
}

EDIT: 5/1/2017

I found there were still instances where you could not get the correct data using built in methods so what I use now is as follows:

function setDomData(element, object){
    //object is a hash

    var keys = Object.keys(object);
    for (var i = 0; i < keys.length; i++){
        var key = keys[i];
        $(element).attr('data-'+key.replace("_", "-"), object[key]);
    }
};

function getDomData(element, key){
    var domObject = $(element).get(0);
    var attKeys = Object.keys(domObject.attributes);

    var values = null;
    if (key != null){
        values = $(element).attr('data-' + key);
    } else {
        values = {};

        var keys = [];
        for (var i = 0; i < attKeys.length; i++) {
            keys.push(domObject.attributes[attKeys[i]]);
        }

        for (var i = 0; i < keys.length; i++){
            if(!keys[i].match(/data-.*/)){
                values[keys[i]] = $(element).attr(keys[i]);
            }
        }
    }
    return values;
};

참고URL : https://stackoverflow.com/questions/6827810/unable-to-set-data-attribute-using-jquery-data-api