Question

我不明白这一点。我有元素......

this.optionElement = $("<option />").text(this.name)
        .data('contact-detail', this);

...使用jQuery data

存储一些数据

我附加选项选项。稍后，我使用innerHTML从html中删除select。由此，jQuery数据因该选项而丢失。

但问题是，我仍然参考了那个选择，并且还引用了它的选项。所以我可以在html中添加select和options。所以我不明白，为什么数据会丢失。

PS：现在我正在用detach解决这个问题，但这很烦人。

修改

我真的试图重现我的问题。很多事情可能没有任何意义。我的小部件更大，包含更多对象......

http://jsfiddle.net/D5Gfc/6/

JS：

// Object declarations
var Select = function (wrapper) {
    this.select = $("<select />");
    this.wrapper = wrapper;
    this.init();
};

Select.prototype.init = function () {
    this.select.change(this.onChange.bind(this));
    this.select.appendTo(this.wrapper);
};

Select.prototype.onChange = function () {
    var cDetail = this.select.find("option:selected").data("contact-detail");
    console.log("before html wipe:");
    console.log(this.select.find("option:selected").data());
    console.log(cDetail.option.data());
    this.wrapper.html("");
    this.wrapper.html(this.select);
    console.log("after:");
    console.log(this.select.find("option:selected").data());
    console.log(cDetail.option.data()); // in my code, this line still shows data
};

var ContactDetail = function (name, select) {
    this.select = select;
    this.name = name;
    this.init();
};

ContactDetail.prototype.init = function () {
    this.option = $("<option />").text(this.name).data("contact-detail", this);
    this.select.select.append(this.option);
};



// Part where I run widget
var list = ["phone", "blog", "email", "about"];

var wrapper = $("#wrapper");
var select = new Select(wrapper);

for (var i = 0; i < list.length; i++) {
    new ContactDetail(list[i], select);
}

如果使用innerHTML，jQuery data（）将丢失

0 个答案: