当我尝试从属性值获取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方法。