Tidak dapat menetapkan atribut data menggunakan API jQuery Data ()

Saya memiliki bidang berikut pada tampilan MVC:

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

Dalam file js terpisah, saya ingin mengatur data-helptextatribut ke nilai string. Ini kode saya:

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

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

The alert()panggilan bekerja dengan baik, hal itu menunjukkan teks "Old Text" dalam dialog peringatan. Namun, panggilan untuk mengatur data-helptextatribut ke "Testing 123" tidak berfungsi. "Teks Lama" masih merupakan nilai atribut saat ini.

Apakah saya menggunakan panggilan ke data () secara salah? Saya sudah mencari ini di web, dan saya tidak bisa melihat kesalahan saya.

Ini markup HTML:

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

Itu disebutkan dalam .data()dokumentasi

Atribut data ditarik pertama kali properti data diakses dan kemudian tidak lagi diakses atau dimutasi (semua nilai data kemudian disimpan secara internal di jQuery)

Ini juga dibahas pada Mengapa tidak mengubah ke jQuery $ .fn.data () memperbarui atribut html 5 data- * yang sesuai?

Demo pada jawaban asli saya di bawah ini sepertinya tidak berfungsi lagi.

Jawaban yang diperbarui

Sekali lagi, dari .data()dokumentasi

Perlakuan atribut dengan tanda hubung tertanam diubah di jQuery 1.6 agar sesuai dengan spesifikasi W3C HTML5.

Jadi untuk <div data-role="page"></div>yang berikut ini benar$('div').data('role') === 'page'

Saya cukup yakin itu $('div').data('data-role')berhasil di masa lalu tetapi tampaknya tidak menjadi masalah lagi. Saya telah membuat showcase yang lebih baik yang log ke HTML daripada harus membuka Konsol dan menambahkan contoh tambahan dari multi-hyphen ke konversi atribut data camelCase .

Demo yang diperbarui (2015-07-25)

Juga lihat jQuery Data vs Attr?

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>

JavaScript (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();

Demo yang lebih lama

Jawaban asli

Untuk HTML ini:

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

dan JavaScript ini (dengan 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;
});

Lihat demo

Menggunakan Chrome DevTools Console untuk memeriksa DOM, $('#foo').data('helptext', 'Testing 123'); tidak memperbarui nilai seperti yang terlihat di Konsol tetapi $('#foo').attr('data-helptext', 'Testing 123');tidak.

Saya mengalami masalah serius dengan

.data('property', value);

Itu tidak mengatur data-propertyatribut.

Mulai menggunakan jQuery's .attr():

Dapatkan nilai atribut untuk elemen pertama di set elemen yang cocok atau set satu atau lebih atribut untuk setiap elemen yang cocok.

.attr('property', value)

untuk mengatur nilai dan

.attr('property')

untuk mengambil nilai.

Sekarang berhasil!

Jawaban yang diterima @ andyb memiliki bug kecil. Lebih lanjut ke komentar saya pada posnya di atas ...

Untuk HTML ini:

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

Anda perlu mengakses atribut seperti ini:

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

tetapi metode datanya seperti ini:

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

Perbaikan di atas untuk metode .data () akan mencegah "tidak terdefinisi" dan nilai data akan diperbarui (sedangkan HTML tidak akan)

Titik atribut "data" adalah untuk mengikat (atau "tautan") nilai dengan elemen. Sangat mirip dengan onclick="alert('do_something')"atribut, yang mengikat aksi ke elemen ... teks tidak berguna Anda hanya ingin aksi bekerja ketika mereka mengklik elemen.

Setelah data atau tindakan terikat ke elemen, biasanya * tidak perlu memperbarui HTML, hanya data atau metode, karena itulah yang akan digunakan oleh aplikasi Anda (JavaScript). Dari segi kinerja, saya tidak mengerti mengapa Anda juga ingin memperbarui HTML, tidak ada yang melihat atribut html (kecuali di Firebug atau konsol lain).

Salah satu cara Anda mungkin ingin memikirkannya: HTML (beserta atribut) hanyalah teks. Data, fungsi, objek, dll yang digunakan oleh JavaScript ada di bidang yang terpisah. Hanya ketika JavaScript diperintahkan untuk melakukannya, itu akan membaca atau memperbarui teks HTML, tetapi semua data dan fungsi yang Anda buat dengan JavaScript bertindak sepenuhnya terpisah dari teks / atribut HTML yang Anda lihat di konsol Firebug (atau lainnya) Anda.

* Saya memberi penekanan pada biasanya karena jika Anda memiliki kasus di mana Anda perlu melestarikan dan mengekspor HTML (misalnya beberapa jenis format mikro / editor teks sadar data) di mana HTML akan memuat segar di halaman lain, maka mungkin Anda perlu memperbarui HTML terlalu.

Hal yang sama terjadi pada saya. Ternyata itu

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

memberi Anda objek yang tidak bisa ditulisi. Saya menyelesaikannya menggunakan:

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

Dan sejak saat dataitu , adalah objek JS standar yang dapat ditulis.

Mengutip kutipan:

Atribut data ditarik pertama kali properti data diakses dan kemudian tidak lagi diakses atau bermutasi (semua nilai data kemudian disimpan secara internal di jQuery).

.data() - Dokumentasi jQuery

Perhatikan bahwa batasan ini (sangat aneh ) hanya ditahan untuk penggunaan .data().

Solusinya? Gunakan .attrsebagai gantinya.

Tentu saja, beberapa dari Anda mungkin merasa tidak nyaman karena tidak menggunakan metode khusus itu. Pertimbangkan skenario berikut:

• 'Standar' diperbarui sehingga bagian data dari atribut khusus tidak lagi diperlukan / diganti

Akal sehat - Mengapa mereka mengubah atribut yang sudah ada seperti itu? Bayangkan saja classmulai diubah namanya menjadi grup dan iduntuk pengidentifikasi . Internet akan rusak.

Dan bahkan kemudian, Javascript sendiri memiliki kemampuan untuk memperbaikinya - Dan tentu saja, meskipun itu tidak sesuai dengan HTML, REGEX (Dan berbagai metode serupa) dengan cepat dapat mengubah nama atribut Anda ke 'standar' mitos-baru ini.

TL; DR

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

Seperti disebutkan, .data()metode ini tidak akan benar-benar menetapkan nilai data-atribut, juga tidak akan membaca nilai yang diperbarui jika data-atribut berubah.

Solusi saya adalah memperluas jQuery dengan .realData()metode yang benar-benar sesuai dengan nilai atribut saat ini:

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

CATATAN: Tentu saja Anda bisa menggunakan .attr(), tetapi dari pengalaman saya, sebagian besar pengembang (alias saya) membuat kesalahan dengan melihat .attr()dan .data()dipertukarkan, dan sering mengganti satu dengan yang lain tanpa berpikir. Ini mungkin bekerja sebagian besar waktu, tapi ini cara yang bagus untuk memperkenalkan bug, terutama ketika berhadapan dengan segala jenis pengikatan data dinamis. Jadi dengan menggunakan .realData(), saya bisa lebih eksplisit tentang perilaku yang dimaksud.

Punya masalah yang sama. Karena Anda masih bisa mendapatkan data menggunakan metode .data (), Anda hanya perlu mencari cara untuk menulis ke elemen. Ini adalah metode pembantu yang saya gunakan. Seperti yang dikatakan kebanyakan orang, Anda harus menggunakan .attr. Saya memilikinya mengganti _ dengan - seperti yang saya tahu itu. Saya tidak mengetahui adanya karakter lain yang digantikannya ... namun saya belum merisetnya.

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

Saya menemukan masih ada contoh di mana Anda tidak bisa mendapatkan data yang benar menggunakan metode bawaan sehingga yang saya gunakan sekarang adalah sebagai berikut:

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;
};