当我尝试从属性值获取HTML数据时,为什么会出现错误?

时间:2015-05-11 18:57:44

标签: javascript jquery html5

我有这个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不是函数

我知道为什么会出现上述错误?

3 个答案:

答案 0 :(得分:1)

试试这个:

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

答案 1 :(得分:1)

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

试试这个

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

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

答案 2 :(得分:1)

在您的代码中elementHTMLInputElement个对象。与其他.data()对象一样,它没有HTMLElement方法。如果你想使用jQuery .data()方法,首先应该创建一个jQuery对象:

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

另请注意,jQuery .data()方法在后台尝试 $.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,则必须使用$.parseJSONJSON.parse方法。