jquery - 使用 $(html, props) 并附加 .data 通过 jQuery 创建新元素

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));

但是.load()当 <li> 时事件似乎不会被触发被附加到 DOM 中。有没有办法在不选择新的 <li> 的情况下完成此任务？通过它的ID？

我设想它通过返回一个对象数组来工作:

$('<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));

Answer 1

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

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