当我试图追加data-id;我收到了一个错误

Question

检查一下： 这是一个工作正常的简单代码

HTML

<select></select>
<button id="btn1">click me</button>

JS

$('#btn1').on('click',function(){
    var select = $('select');
    select.append($('<option>').val('v2').text('text2'));
});

当我试图追加data-id时，我收到了一个错误。有什么帮助吗？

select.append($('<option>').val('v2').text('text2').data-id('id1'));

http://jsfiddle.net/omarmakled/QQ44U/

Answer 1

使用的正确方法是data()：

select.append($('<option>').val('v2').text('text2').data('id','id1'));

或者如果您想要实际属性，可以使用attr()：

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

Answer 2

你可以做2种方式

select.append($('<option>').val('v2').text('text2').attr('data-id','id1'));

或

select.append($('<option>').val('v2').text('text2').data('id', 'id1'));

http://api.jquery.com/data/
http://api.jquery.com/attr/

Answer 3

首先，data-id字符串是JS中的非法标识符（因为它包含连字符），因此即使它作为jQuery对象方法可用，您也应该像这样调用它...

someObj['data-id'](someId);

显然，对于这么简单的操作来说，这太麻烦了。事实上，jQuery.prototype中没有定义这样的方法 - 而是希望您使用attr()（显式设置任何属性）或data()（特定于数据集API）一个）。

作为旁注，你不必打那么多电话：这......

select.append($('<option>', {
  value: 'v2',
  text: 'text2',
  'data-id': 'id1'
}));

...更具可读性和效率。注意'data-id'周围的引号：只有当对象属性是正确的JS标识符时才能引用它们。

JSFiddle