當我嘗試從屬性值獲取HTML數據時，為什么會出現錯誤？

Question

我有這個HTML代碼：

<input type = "button" id = "someID" data-ddd='{"a": 1, "b": "2"}' onclick = "someevent(this)" />

活動實施：

function someevent(element) {
    var d = $.parseJSON(element.data("ddd"));
    alert(d.a);
}

在這一行：

 var d = $.parseJSON(element.data("ddd"));

我收到以下錯誤：

TypeError：element.data不是函數

知道為什么我會收到上述錯誤嗎？

Answer 1

嘗試這個：

function someevent(element)
{
        var data=element.getAttribute("data-ddd");
        var d=JSON.parse(data);
        alert(d['a']);
}

Answer 2

我在你的代碼中做了一些修改

嘗試這個

<input type="button" id="someID" data-ddd='{"a": 1, "b": "2"}' />

$("#someID").click(function() {
    var d = $(this).data("ddd");
    alert(d.a);
});

Answer 3

在您的code element是一個HTMLInputElement對象。 它沒有.data()方法，就像其他HTMLElement對象一樣。 如果你想使用jQuery .data()方法，你應該首先創建一個jQuery對象：

$(element).data("ddd");

另請注意，jQuery .data()方法在$.parseJSON 嘗試 $.parseJSON ，因此無需解析數據，即返回相應的JavaScript結構：

function dataAttr( elem, key, data ) {
    var name;

    // If nothing was found internally, try to fetch any
    // data from the HTML5 data-* attribute
    if ( data === undefined && elem.nodeType === 1 ) {
        name = "data-" + key.replace( rmultiDash, "-$&" ).toLowerCase();
        data = elem.getAttribute( name );

        if ( typeof data === "string" ) {
            try {
                data = data === "true" ? true :
                    data === "false" ? false :
                    data === "null" ? null :
                    // Only convert to a number if it doesn't change the string
                    +data + "" === data ? +data :
                    rbrace.test( data ) ? jQuery.parseJSON( data ) :
                    data;
            } catch ( e ) {}

            // Make sure we set the data so it isn't changed later
            dataUser.set( elem, key, data );
        } else {
            data = undefined;
        }
    }
    return data;
}

如果使用.attr()而不是.data()方法然后解析JSON，則必須使用$.parseJSON或JSON.parse方法。