[英]Saving custom data to dom elements using jquery only once
我正在通過讀取查詢字符串參數使用jQuery創建動態控件。 可以拖動這些控件以使其整齊地放置它們,在拖放事件發生后,我將通過隱藏字段更新控件的位置和狀態。 只是我的實現現在每次刪除時都會更新數據,這並不好。 我也通過活動來做到這一點,但效果不佳
/*Create controls when only query string exists*/
if (config.params) {
//parse the query string json as a object
//ex:{type:"textbox",x:100,y:200,label:Name}
var params = $.parseJSON(config.params);
//for each control in json add it to document body
$(params).each(function (idx, obj) {
var id = new Date();//for generating dynamic id
id = id.getTime();
$("<span>").addClass(obj.css).load(function (ev) {
var a = this;
$(a).data("keys", {
key: $("label", a).text()**certainly label wont be found**,
value: $("input[name]:hidden", a)
});
}).
easydrag().ondrop(function (e, el) {
//easydrag drag drop plugin
var a = $(el),
b = a.data("keys"),
key = b.key,
value = b.value;
value.val(key + "$" + e.pageX + "$" + e.pageY);
}).
css({
position: "absolute",
top: obj.y,
left: obj.x
}).
append($("<label>", {
"for": id
}).
html(obj.label).
append(config.ELEMENTS(obj.type).attr("id", id))).
append($("<input>", {
"type": "hidden",
"name": "CONTROL$POSITION",
"id": "control_position_" + idx
})).
appendTo("form");
});
}
label
和hidden fields
。 我只需要設置一次元素span
上的數據,因為在drop event
期間,我將訪問標簽和隱藏字段以更新控件的當前位置。 我不想 query the dom
上的每一滴的label
和hidden field
這就是我的目的。 擺脫load
,並臨時存儲對該元素的引用。 在元素完全完成創建之后執行代碼:
var span = $("<span>");
span.addClass(obj.css).
easydrag(). //et cetera
....
appendTo("form");
//After the element has finished:
$(span).data("keys", {
key: $("label", span).text(),
value: $("input[name]:hidden", span)
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.