使用$(html, props)在jQuery中创建新元素并附加.data属性

Question

我正在使用对象表示法(http://api.jquery.com/jQuery/#jQuery2)创建一个动态的列表项，并希望能够在其中添加 jQuery 的 .data() (http://api.jquery.com/data/)。

这是我当前的代码:

$('<li>', {
        id: 'filter',
        text: 'Data Filter 1',
        click: function() {
            filter['jQuery_object'] = $(this);
            filters_display.trigger('remove', filter);
        }
    }).appendTo($(this));

我尝试过以下操作：

$('<li>', {
        id: 'filter',
        text: 'Data Filter 1',
        load: function() {
            $(this).data('filter', filter);
        },
        click: function() {
            filter['jQuery_object'] = $(this);
            filters_display.trigger('remove', filter);
        }
    }).appendTo($(this));

但是当<li>被添加到DOM中时，.load()事件似乎没有被触发。有没有一种方法可以在不通过id选择新的<li>的情况下完成这个任务？

我设想它能够像这样工作，通过返回一个对象数组：

$('<li>', {
        id: 'filter',
        text: 'Data Filter 1',
        data: function() {
            return [{ key: 'filter', value: filter }]
        }
        click: function() {
            filter['jQuery_object'] = $(this);
            filters_display.trigger('remove', filter);
        }
    }).appendTo($(this));

- Treffynnon

Answer 1

var div = $("<div></div>", {
    data: {
        foo: "bar"
    }
});

alert( div.data("foo") ); // => bar

- ehynds

Answer 2

只需在您的链中添加.data('filter', filter)即可...。

$('<li>', {
        id: 'filter',
        text: 'Data Filter 1',
        click: function() {
            filter['jQuery_object'] = $(this);
            filters_display.trigger('remove', filter);
        }
    }).appendTo($(this)).data('filter', filter);

- Sean Vieira

---

这将把数据附加到$(this)，而不是li，对吗？ - Treffynnon

@Treffynnon -- 不对，appendTo() 仍会返回新创建的 <li> -- 参见：http://jsfiddle.net/wrwfG/ - Sean Vieira

Answer 3

我在jQuery IRC频道里问了一下，答案非常简单：

var div = $("<div></div>", {
    data: {
        foo: "bar"
    }
});

alert( div.data("foo") );

jQuery IRC 频道的答案：http://jsfiddle.net/ehynds/3kw3v/

- Treffynnon

---

被接受的答案来自于在IRC频道中提供帮助的同一人。 - Treffynnon