jQuery中创建元素时如何使用数据集属性？

Question

我有一段代码是这样的：

$('<button/>', {
        text: 'Send',
        dataUrl: pageUrl,
        dataTitle: pageTitle,
        class: 'cannedSend'
    }).appendTo('#btnSpan');
}

通常，当属性中有连字符时，您可以将其大小写（例如 marginRight），而在 HTML 一侧，它显示为 margin-right。然而，对于数据集属性，它只是简单地编写没有连字符的 dataurl。连接 .attr('data-url', pageUrl).attr('data-title', pageTitle) 看起来很难看，使用一个对象将它们都传递到同一个 .attr() 会导致与上述相同的问题。

有什么想法吗？

Answer 1

您可以像这样引用属性个名字：

$('<button/>', {
        text: 'Send',
        "data-url": pageUrl,
        "data-title": pageTitle,
        class: 'cannedSend'
    }).appendTo('#btnSpan');

jsFiddle Demo

或使用.data:

$('<button/>', {
        text: 'Send',
        class: 'cannedSend'
    })
    .data({
        url: pageUrl,
        title: pageTitle
    })
    .appendTo('#btnSpan');

jsFiddle Demo

Answer 2

在我问这个问题之前尝试了一个小时之后，我一问就找到了解决方案。

简单地引用属性，像这样：

$('<button/>', {
    text: 'Send',
    'data-url': pageUrl,
    'data-title': pageTitle,
    class: 'cannedSend'
}).appendTo('#btnSpan');

}

jQuery中创建元素时如何使用数据集属性？

How to use dataset attributes when creating an element in jQuery?

javascript

jquery

dataset